非同期データのロードと動的更新
非同期ロード
入門の例のデータは、 setOption を使用して直接更新されています。しかし多くの場合で、非同期でデータを読み込まなければなりません。EChartsでは非同期ロードを簡単な方法で行うことができます。jQueryなどの関数を使用して非同期でデータを取得し、チャートの初期化後に setOption を使用してデータと設定を入力することができます。
var myChart = echarts.init(document.getElementById('main'));
$.get('data.json').done(function(data) {
// Structure of data:
// {
// categories: ["Shirt","Wool sweater","Chiffon shirt","Pants","High-heeled shoes","socks"],
// values: [5, 20, 36, 10, 10, 20]
// }
myChart.setOption({
title: {
text: 'Asynchronous Loading Example'
},
tooltip: {},
legend: {},
xAxis: {
data: data.categories
},
yAxis: {},
series: [
{
name: 'Sales',
type: 'bar',
data: data.values
}
]
});
});または、空の軸をすべてのスタイルで定義し、データを入力する前に表示します
var myChart = echarts.init(document.getElementById('main'));
// Show title, legends and empty axes
myChart.setOption({
title: {
text: 'Asynchronous Loading Example'
},
tooltip: {},
legend: {
data: ['Sales']
},
xAxis: {
data: []
},
yAxis: {},
series: [
{
name: 'Sales',
type: 'bar',
data: []
}
]
});
// Asynchronous Data Loading
$.get('data.json').done(function(data) {
// Fill in the data
myChart.setOption({
xAxis: {
data: data.categories
},
series: [
{
// Find series by name
name: 'Sales',
data: data.data
}
]
});
});例えば
データを更新するときに、ECharts で「ナビゲート」するにはnameを使用する必要があります。上記の例では、チャートは系列の順序によって通常更新されますが、データを更新中にnameデータを追加することをお勧めします。
ローディングアニメーション
データの読み込みに時間がかかると、ユーザーは軸のみが空のチャートに直面し、バグがあるのではないかと考えてしまいます。
ECharts 默认有一个简单的加载动画。您可以调用 showLoading 显示动画。当数据加载完毕后，调用 hideLoading 隐藏动画。
myChart.showLoading();
$.get('data.json').done(function (data) {
myChart.hideLoading();
myChart.setOption(...);
});效果如下
动态更新
ECharts 由数据驱动，数据的变化将会驱动图表展现形式的变化。因此，实现动态更新非常简单。
所有数据更新都通过 setOption 实现。您只需要周期性地获取数据，ECharts 将比较两组数据中的差异，使用合适的方式选择动画。
查看以下示例。
