echartsでデータを引用する方法を教えてください。

2年 ago
蓮, 翼
1 minute

EChartsにはデータの読み込み方法がいくつかあり、データのソースやフォーマットに応じて、適した読み込み方法を選択できます。以下はいくつかの一般的なデータの読み込み方法です。

  1. データ参照：データを ECharts の設定項目で直接参照する。たとえば、JavaScript の配列やオブジェクト形式でデータを直接コードで定義する。
var data = [10, 20, 30, 40, 50];
option = {
series: [{
type: 'bar',
data: data
}]
};
  1. 非同期リクエストによるデータ取得: AjaxやFetchなどを用いてサーバーからデータを取得し、成功時のコールバック関数でEChartsに値を代入する。
// 使用Ajax获取数据
$.ajax({
url: 'data.json',
success: function (data) {
option = {
series: [{
type: 'bar',
data: data
}]
};
myChart.setOption(option);
}
});
// 使用Fetch获取数据
fetch('data.json')
.then(function (response) {
return response.json();
})
.then(function (data) {
option = {
series: [{
type: 'bar',
data: data
}]
};
myChart.setOption(option);
});
  1. データインターフェースの参照：EChartsが提供するデータインターフェースやサードパーティ製データインターフェースを使用してデータインターフェースからデータを取得し、インターフェースから返されるデータをECharts設定項目に直接代入します。
// 使用ECharts提供的数据接口
$.get('https://echarts.apache.org/examples/data/asset/data/iris.json', function (data) {
option = {
series: [{
type: 'scatter',
data: data
}]
};
myChart.setOption(option);
});
// 使用第三方数据接口
$.get('https://api.example.com/data', function (data) {
option = {
series: [{
type: 'bar',
data: data
}]
};
myChart.setOption(option);
});

一般的なデータ引用方法をいくつかご紹介します。使用する方法は、データのソースと形式、プロジェクトのニーズと実際の状況によって異なります。

bannerAds