ホームページ > 記事 > ウェブフロントエンド > HTML5、JS、JQuery、ECharts の非同期読み込み
HTML5、JS、JQuery、ECharts の非同期読み込み
- 小云云オリジナル
- 2017-12-18 09:11:111859ブラウズ
ここ数日間、ECharts 公式 Web サイトの API とデモを見て非常に興味深いと感じたので、モデル予測によって生成されたデータを使用して、擬似リアルタイムの動的データ表示を作成しました。この記事では、HTML5+JS+JQuery+ECharts で実装される非同期読み込みの問題を中心に紹介しますので、困っている方は参考にしていただければ幸いです。
まず、index.htmlファイルを作成し、vscodeで開いて書き込みます。
1. タグ
<p id="main" style="width:600px;height:400px;"></p>
を挿入し、いくつかのスタイルを設定します (自分で美しくすることができます、私は怠け者です!!!)。
2. 本体の下に <script> スクリプトを作成します (なぜ本体の下に js スクリプトを記述する必要がありますか?これはユーザー エクスペリエンスを向上させるためであり、Baidu を深く掘り下げることができるためです~~~)。 </p> <p>3. スクリプトとは何ですか?心配しないでください、ゆっくりしてください~~</p> <p> (1) まず、echarts オブジェクトを構築しましょう。それを MyChart と呼びましょう </p> <pre class="brush:php;toolbar:false"> var myChart = echarts.init(document.getElementById('main'));</pre> <p> (2) グラフを初期化するための setoption を構築し、いくつかの基本パラメータを入力します (参考までにこのリンクからEcharts公式サイトに飛んでください) </p> <p> (3) 初期化後、ajaxでローカルファイルを非同期で読み込むことができます~~~~</p> <p>スタックがわからない人(リンクはここです、これは私のものです) Google はい、ブロックされる可能性があります~~) プッシュとシフトのデータ操作を理解していない人 (ここのリンクはブロックされないはずです~~) </p> <pre class="brush:php;toolbar:false">$.ajax({ type:"get", // async:true, url:"test_data.json", data:{}, dataType:"json", success:function(result){ var datas=result if(result){ var m=0; for(var i=0;i<result.length;i++){ if(m<1000){ datas.shift(); date.push(result[i]["time"]); data.push(result[i]["AM23SIG0206.AV"]); m+=1; } else{ break; } myChart.hideLoading(); setInterval(function(){ for(var n=0;n<2;n++){ date.shift(); date.push(datas[n]["time"]); data.shift(); data.push(datas[n]["AM23SIG0206.AV"]); } myChart.setOption({ xAxis:{ data:date }, series:[ { name:"参数", data:data } ]}); for(var nn=0;nn<2;nn++){ datas.shift() } },2000); } } }, error:function(errorMsg){ alert("图表请求数据失败！"); myChart.hideLoading(); myChart_2.hideLoading(); } })</pre><p> 説明すると、この非同期読み込みの原理は次のとおりです。 </p><p> (1) 変数 result に格納されている .json ファイルを読み込み、データの操作を開始します。スタックの概念を使用して、最初にグラフに表示するデータ量を想定して格納します。は1000ポイントで、それをデータに保存します(これはキューです) ダイナミックなリアルタイムデータを実現したい場合は、データを見ると動きます~~~~ データを保存する必要がありますが、このキューの容量は 1000 しかありません、入れられなかったらどうすればいいですか？ ~~</p><p>(2) でも、1つ取って1つ保存するのは面倒なので、この中にタイマーsetInterval()を設定して、2秒ごとに2つ更新します(更新方法はdata.shift()です</p><p>data)。 .push()</p><p>はスタックをシミュレートします~~~~</p><p>これで動的データを実現できます~~~~</p><p> さて、このままだと低すぎます フレームワーク+データベース+フロントを実装したいです。移動する実際のデータを終了します ~~~~ 数日間勉強させてください ~~~~~~</p><p> さて、これ以上ナンセンスではありません、これがソースコードです、必要であれば、子供用の靴を自分で走らせることができます移動できるか確認してください~~~~~</p><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Charts</title> <script type="text/javascript" src="echarts.min.js"></script>
<p id="main" style="width:600px;height:400px;"></p>