データと系列をEchartsに動的に追加します
私は echarts を学び使用しようとしています。
echarts を使用して静的なグラフを作成する方法を学びました。次に、データと系列をグラフに動的に追加する必要があります。
APIにはaddSeriesやaddDataのようなメソッドがありますが、これらのメソッドを使おうとすると、奇妙な状況が発生します。
ある期間にいくつかの番組があったラジオチャンネルがいくつかあると仮定します。チェックするチャンネルの数がわからないので、データベースからチャンネルリストを取得して、チャンネルごとにプログラムを数える必要があります。私はこれを試しました：
$.ajax({
type: 'POST',
url: "my url",
data: event,
error: function (jqXHR, textStatus, errorThrown) {
alert('ERROR');
},
beforeSend: function (xhr) {
$(document).find('.loaderWrapper').find('.loader').html('<img src="<?= base_url() ?>global/templates/default/desktop/assets/images/globe64.gif" width="76"><br /><span class="farsi">wait</span>');
},
success: function (data, textStatus, jqXHR) {
//console.log(JSON.parse(data), $.parseJSON(data));
var chartData = eval( $.parseJSON(data) );
if(data === 'eventError')
{
$(document).find('.loaderWrapper').find('.loader').html('<span class="alert alert-danger farsi">choose event</span>');
return false;
}//if eventError
if(data === 'dbError')
{
$(document).find('.loaderWrapper').find('.loader').html('<span class="alert alert-danger farsi">error</span>');
return false;
}//if eventError
var channelsArray = [];
for( var i=0; i < objSize(chartData.allChannels); i++ )
{
channelsArray.Push(chartData.allChannels[i].channel);
}
console.log(channelsArray);
require(
[
'echarts',
'echarts/chart/bar', // require the specific chart type
'echarts/chart/line', // require the specific chart type
],
function (ec) {
// Initialize after dom ready
var myChart = ec.init(document.getElementById('programPerChannel'));
option = {
title : {
text: 'test title',
x : 'right'
},
tooltip : {
trigger: 'axis'
},
legend: {
data: channelsArray
},
toolbox: {
show : true,
x : 'left',
feature : {
mark : {
show: true,
title: {
mark : 'marker',
markUndo : 'undo',
markClear : 'clear'
},
lineStyle : {
width : 3,
color : '#1e90ff',
type : 'dashed'
}
},
dataView : {show: false, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : channelsArray
}
],
yAxis : [
{
type : 'value'
}
]
};
// Load data into the ECharts instance
myChart.setOption(option);
for ( var j = 0; j < channelsArray.length; j++)
{
myChart.setSeries([
{
name:channelsArray[j],
type:'line',
stack: 'area',
symbol: 'none',
itemStyle: {
normal: {
areaStyle: {
color : (function (){
var zrColor = require('zrender/tool/color');
return zrColor.getLinearGradient(
0, 200, 0, 400,
[[0, 'rgba(128,' + 10 * j / 2 + ',0,0.8)'],[0.8, 'rgba(128,19,255,0.1)']]
)
})()
}
}
},
data:[
[j * 10, j * 11, j *3, j * 7],
]
}
]);//set series
//adding data inside addSeries will set data to first channel only, code was tested with or without this part
myChart.addData([
[1, 10 , j, j*2],
[1, 10 , j, j*2],
[1, 10 , j, j*2],
[1, 10 , j, j*2]
]);//add Data
}//for
}//functuin(ec)
);
$(document).find('.loaderWrapper').find('.loader').html('');
}//success
});//Ajax
addSeriesメソッドでは、データは最初のチャネルのみに設定され、addData echartsでは、飛んでいるバブルだけが表示されます!!! :)
最初の状況の画像：
2番目：泡!!!
私の問題のどの部分を見つけるのを手伝ってくれませんか？
よろしくお願いします
最初の状況（最初のチャネルだけにデータがある）の理由は、 setSeries メソッドがシリーズをシリーズのリストにマージしておらず、置き換えられているためです。したがって、seriesListを作成/準備してから、次のようなsetSeriesメソッドを使用する必要があります。
var seriesList = [];
for ( var j = 0; j < channelsArray.length; j++)
{
seriesList.Push(
{
name:channelsArray[j],
type:'line',
stack: 'area',
symbol: 'none',
itemStyle: {
normal: {
areaStyle: {
color : (function (){
var zrColor = require('zrender/tool/color');
return zrColor.getLinearGradient(
0, 200, 0, 400,
[[0, 'rgba(128,' + 10 * j / 2 + ',0,0.8)'],[0.8, 'rgba(128,19,255,0.1)']]
)
})()
}
}
},
data:[
[j * 10, j * 11, j *3, j * 7],
]
}
);//end-Push
} //end-for-loop
myChart.setSeries(seriesList);
アニメーション化された/移動する動的グラフが必要な場合は、この デモ が役立ちます。
2番目：バブル!!がデフォルトです noDataLoadingOption echartsのアニメーション。これは、echartsインスタンスに渡されたまたは割り当てられたオプション/構成を壊してechartインスタンスORにロードされたデータがない場合に発生する可能性があります。