ホームページ >Java >＆＃＆チュートリアル >ECharts と Java インターフェイスを使用して美しい 3D 統計グラフを作成する方法
ECharts と Java インターフェイスを使用して美しい 3D 統計グラフを作成する方法
- WBOYオリジナル
- 2023-12-18 17:59:151205ブラウズ
近年、ビッグデータの発展により、データの可視化はますます重要な分野となっています。データの視覚化により、データの理解と分析が容易になるだけでなく、データの美しさも向上します。ビジュアライゼーションの分野では、データの特徴をより直観的に表示できる3D統計図がよく使われます。この記事では、ECharts と Java インターフェイスを使用して美しい 3D 統計グラフを作成する方法を紹介し、具体的なコード例を示します。
ECharts の概要
[ECharts](https://echarts.apache.org/zh/index.html) は、インタラクティブな効率的なチャートを構築するためのオープンソースの JavaScript ベースの視覚化ライブラリです。データ視覚化インターフェイス。 ECharts は、棒グラフ、折れ線グラフ、散布図、地図など、さまざまな種類のグラフをサポートしています。また、動的データや対話型機能もサポートしています。
Java インターフェースの概要
ほとんどの場合、グラフを描画するにはバックグラウンドからデータを取得する必要があります。したがって、データを取得するには Java インターフェイスを使用する必要があります。 Java インターフェースは、バックグラウンドと対話してデータを取得するために使用されるテクノロジーです。この記事では、Java インターフェイスを使用して、ランダムに生成されたデータを取得し、3D 統計グラフを描画します。
ステップ 1: 準備
まず、EChart をダウンロードする必要があります。最新版は[ECharts公式サイト](https://echarts.apache.org/zh/download.html)からダウンロードできます。さらに、Java コードを作成するには Java IDE (Eclipse など) も必要です。
ステップ 2: Java コードを記述する
以下は、バックグラウンドからランダムに生成されたデータを取得するための Java コードです:
@RequestMapping("/getChartData")
@ResponseBody
public String getChartData() {
int min = 1;
int max = 100;
JSONArray jsonArray = new JSONArray();
for(int i = 0; i < 10; i++) {
int num1 = (int)(Math.random() * (max - min) + min);
int num2 = (int)(Math.random() * (max - min) + min);
int num3 = (int)(Math.random() * (max - min) + min);
jsonArray.add(new JSONArray(Arrays.asList("data" + (i + 1), num1, num2, num3)));
}
return jsonArray.toJSONString();
}上記のコードでは、Spring MVC を使用します。 Java コードを作成するためのフレームワーク。まず、最大値と最小値を設定します。次に、Math.random() メソッドを使用して 3 つの整数をランダムに生成し、JSONArray オブジェクトに追加します。最後に、JSONArray オブジェクトを文字列に変換し、その逆の変換を行います。
ステップ 3: HTML コードを記述する
次は HTML コードです:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D统计图示例</title>
<script src="echarts.min.js"></script>
</head>
<body>
<div id="myChart" style="width: 800px;height:400px;"></div>
<script>
var myChart = echarts.init(document.getElementById('myChart'));
var option = {
title: {
text: '3D统计图示例'
},
tooltip: {},
legend: {
data: ['data1', 'data2', 'data3']
},
xAxis: {
type: 'category',
data: []
},
yAxis: {},
zAxis: {},
grid3D: {},
series: [{
name: 'data1',
type: 'bar3D',
data: []
},{
name: 'data2',
type: 'bar3D',
data: []
},{
name: 'data3',
type: 'bar3D',
data: []
}]
};
myChart.setOption(option);
$.ajax({
url: 'getChartData',
type: 'POST',
success: function (data) {
data = JSON.parse(data);
var xAxisData = data.map(function (item) {
return item[0];
});
var data1 = [], data2 = [], data3 = [];
for(var i = 0; i < data.length; i++) {
data1.push([data[i][0], data[i][1], i]);
data2.push([data[i][0], data[i][2], i]);
data3.push([data[i][0], data[i][3], i]);
}
myChart.setOption({
xAxis: {
data: xAxisData
},
series: [{
data: data1
}, {
data: data2
}, {
data: data3
}]
});
}
});
</script>
</body>
</html>上記のコードでは、ランダムに生成されたデータを取得するために jQuery ライブラリを使用しました。まず、3D グラフを表示するための div 要素を作成しました。次に、echarts.init() メソッドを使用して 3D 統計グラフを初期化し、座標軸や凡例などのいくつかの基本オプションを設定します。次に、$.ajax() メソッドを使用してバックグラウンドからデータを取得し、3D 統計グラフにデータを表示します。
異なるデータ系列を表すために 3 つの異なる色を使用していることにも言及する価値があります。
ステップ 4: プログラムを実行する
最後に、ブラウザで HTML ファイルを開いてプログラムを実行できます。ブラウザ上では美しい3D統計グラフが表示されます。
結論
この記事では、ECharts と Java インターフェイスを使用して美しい 3D 統計グラフを作成する方法を紹介します。まずバックグラウンドからランダムに生成されたデータを取得し、次に EChart を使用してデータを視覚化します。これにより、データをより直感的に理解して分析し、データの美しさを向上させることができます。データ視覚化に興味がある場合は、ECharts と Java インターフェイスを使用して独自のデータ視覚化プログラムを構築してみるのも良いでしょう。
以上がECharts と Java インターフェイスを使用して美しい 3D 統計グラフを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。