ECharts と Java インターフェイスをゼロから学ぶ: カラフルな統計グラフを作成する
近年、ビッグ データ分析の台頭により、統計グラフが重要な役割を果たしています。データの視覚化は重要な役割を果たします。 ECharts は強力なデータ視覚化ライブラリとして、開発者がデータを効果的に表示および分析するためのカラフルな統計グラフを作成するのに役立ちます。 Java インターフェイスを介して、バックエンド データをフロントエンド EChart にシームレスに接続できます。この記事では、EChart と Java インターフェイスを一から学び、いくつかの具体的なコード例を共有します。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>统计图表示例</title> <script src="echarts.js"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <script> // 在这里编写生成图表的代码 </script> </body> </html>
var chartDom = document.getElementById('chart'); var myChart = echarts.init(chartDom); var option = { xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'line' }] }; option && myChart.setOption(option);
上記のコードでは、まず chart
div 要素を取得し、ECharts インスタンスを作成します。次に、option
設定項目で、X 軸と Y 軸のデータ、および折れ線グラフのデータを指定します。最後に、setOption
メソッドを呼び出して、構成項目をグラフに適用します。
まず、データを取得するためのインターフェイスを Java で記述する必要があります。以下は、単純な Java インターフェイスの例です。
@RestController public class ChartDataController { @GetMapping("/chartData") public List<Integer> getChartData() { // 在这里编写获取数据的代码 List<Integer> data = new ArrayList<>(); data.add(120); data.add(200); data.add(150); data.add(80); data.add(70); data.add(110); data.add(130); return data; } }
上記のコードでは、/chartData
パスを、@GetMapping
を通じてチャート データを取得するメソッドにマップします。注釈 。実際のプロジェクトでは、このメソッドでデータベースやインターフェイスなどを呼び出してデータを取得できます。
次に、フロントエンド JavaScript コードの Ajax リクエストを通じてデータを取得し、そのデータを ECharts に渡してグラフを生成する必要があります。
var chartDom = document.getElementById('chart'); var myChart = echarts.init(chartDom); $.ajax({ url: '/chartData', success: function(data) { var option = { xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: { type: 'value' }, series: [{ data: data, type: 'line' }] }; option && myChart.setOption(option); } });
上記の JavaScript コードでは、jQuery の ajax
メソッドを使用してリクエストを送信し、URL を /chartData
として指定し、成功後にデータを取得します。次に、データに基づいて対応するチャートを生成します。
上記の例を通じて、ECharts と Java インターフェイスをゼロから学習してカラフルな統計グラフを作成する方法を予備的に理解することができます。もちろん、これは単なる導入例であり、実際のプロジェクトでは、より複雑なデータ処理やチャートのカスタマイズが含まれる場合があります。この記事があなたにインスピレーションを与え、データ視覚化における画期的な進歩に役立つことを願っています。楽しいプログラミングを!
以上がECharts と Java インターフェイスをゼロから学ぶ: カラフルな統計グラフを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。