echarts チャートの使用経験の概要 (落とし穴の回避)

私は仕事でechartsのグラフを使うことがありますが、よく落とし穴に陥るので、後で確認できるように、そして間違いを避けるためにみんなで共有できるようにまとめておきます。 Echarts を使用してヒストグラムを表示する場合、最初の問題は Echarts の js を設定することです。ここで注意すべき重要なことは、設定するときに Echarts のバージョンに注意することです。

Echarts の使用:

Echarts を使用してグラフを表示する場合、Hcharts と比較すると、原則として、JSON 形式は ajax 関数のデータを通じて解析されます。解析されたデータはチャートに表示されます。この 2 つの違いは主に、Highcharts が SVG テクノロジーに基づいていることです。全く異なり、それぞれに独自の特徴があります。後者は、highcharts ではまったく実現できない 3D グラフィックスをブラウザ上で実現できます。

echarts の使用には、主に 3 つの部分が含まれます。json データのカプセル化、Ajax リクエストとコールバック処理、echarts を参照する js です。

json データのカプセル化:

ここでは主に、DataSet 形式のクエリされたデータを json 形式のデータに変換し、クエリされたデータを list に入れます。最も重要なことは、この list

ajax リクエストとコールバック処理

これには非同期リクエストが含まれるため、ajax リクエストを使用する必要があります。使用する場合は主にリクエスト コールバックが使用され、ここでは一般的なハンドラー (Create) も使用されます。

この cmd を通じて、リクエストを送信するために実行される特定のフロント エンドを取得できます。 dataType は主にデータのタイプを表し、ここでは主に json 形式のデータを表します。Success はデータがバックグラウンドから返され、ajax が正常に実行された後のコールバックを表します。

主な問題は echarts.js と echarts-map.js のバージョンであることに注意してください。この 2 つは esl.js のバージョンと統合される必要があります。 echarts2のバージョンですが、最初は最新のEcharts3をEcharts Watchから直接ダウンロードしてもチャートが表示されません。

テスト時、常にデータは取得できるが、グラフが表示できない

グラフが表示されない場合は、一般にデータが正しいかどうか、またはデータが正しいかどうかをテストする必要があります。テストデータが利用可能です。メインのテストは、ajax の使用が正しいかどうかです。最初に、ajax が汎用ハンドラーに送信され、対応する json 形式のデータが取得できますが、メインでは常にエラー関数のコールバックが使用されます。問題は設定です。 myEcharts.js の js 参照を見てみましょう:

これら 2 つの js は、チャート情報を表示するために使用されるため、ここで正確に設定する必要があります。直接影響する Ajax コールバック関数 ECharts.Bars() は成功します。

以上がecharts チャートの使用経験の概要 (落とし穴の回避)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。