[英]Google charts - animation of stepped chart
I have this problem with animating of 2-datasets Stepped graph in Google Charts. 我有这个问题与动画的2数据集谷歌图表中的步进图。 It all worked well when it was just a LineChart, but my client would love to have SteppedArea chart.
当它只是一个LineChart时它一切都很好,但我的客户希望有SteppedArea图表。 When I change the type from LineChart to SteppedAreaChart, the animation of the first dataset is OK, but the second dataset is somewhat wrong and I cannot figure out why.
当我将类型从LineChart更改为SteppedAreaChart时,第一个数据集的动画是OK,但第二个数据集有些错误,我无法弄清楚原因。 Can you please take a look at this code pen?
你能看看这支代码笔吗? Thank you very much
非常感谢你
function drawStepChart() {
var data1 = new google.visualization.DataTable();
data1.addColumn('number', 'Year');
data1.addColumn('number', 'One');
data1.addColumn('number', 'Two');
var options = {
animation: {duration: 50},
areaOpacity: 0
};
var stepchart = new google.visualization.SteppedAreaChart(document.getElementById('step'));
var index = 0;
var index2 = 0;
var animate1 = function() {
if (index < values[1].length) {
data1.addRows([values[1][index]]);
stepchart.draw(data1, options);
index++;
} else {
if(index2 < values[0].length) {
data1.addRows([values[0][index2]]);
stepchart.draw(data1, options);
index2++;
}
}
}
google.visualization.events.addListener(stepchart, 'animationfinish', animate1);
stepchart.draw(data1, options);
animate1();
}
EDIT: in Google Charts documentation, they say, that animation of stepped charts doesn't support adding rows. 编辑:他们说,在Google Charts文档中,阶梯图的动画不支持添加行。 But I'm not sure it that is the problem because it works alright in the first data set?
但我不确定这是问题,因为它在第一个数据集中正常工作?
looks like it can't handle the null
values for the first series, 看起来它无法处理第一个系列的
null
值,
and setting interpolateNulls: true
doesn't help 并设置
interpolateNulls: true
没有帮助
as a fix, try using setValue
, instead of addRows
, 作为修复,尝试使用
setValue
而不是addRows
,
in the second part of the animation 在动画的第二部分
to fill in the missing values on the first set of rows 填写第一组行的缺失值
seems to fix the line, see following working snippet... 似乎修复了这条线,看下面的工作片段......
google.charts.load("current", { callback: function () { drawLineChart(); drawStepChart(); }, packages: ["corechart", "table"] }); // two sets of values var values = [ [ [1, 1.22, null], [2, 1.22, null], [3, 1.22, null], [4, 1.22, null], [5, 1.22, null], [6, 1.55, null], [7, 1.55, null], [8, 1.55, null], [9, 1.90, null], [10, 1.90, null] ], [ [1, null, 2.11], [2, null, 2.11], [3, null, 2.11], [4, null, 0.80], [5, null, 0.80], [6, null, 0.80], [7, null, 0.80], [8, null, 1.00], [9, null, 2.10], [10, null, 2.10] ] ]; function drawLineChart() { var data1 = new google.visualization.DataTable(); data1.addColumn("number", "Year"); data1.addColumn("number", "One"); data1.addColumn("number", "Two"); var options = { animation: { duration: 50 } }; var linechart = new google.visualization.LineChart( document.getElementById("line") ); var index = 0; var index2 = 0; var animate1 = function() { if (index < values[1].length) { data1.addRows([values[1][index]]); linechart.draw(data1, options); index++; } else { if (index2 < values[0].length) { data1.addRows([values[0][index2]]); linechart.draw(data1, options); index2++; } } }; google.visualization.events.addListener( linechart, "animationfinish", animate1 ); linechart.draw(data1, options); animate1(); } function drawStepChart() { var data1 = new google.visualization.DataTable(); data1.addColumn("number", "Year"); data1.addColumn("number", "One"); data1.addColumn("number", "Two"); var options = { animation: { duration: 50 }, areaOpacity: 0 }; var stepchart = new google.visualization.SteppedAreaChart( document.getElementById("step") ); var index = 0; var index2 = 0; var animate1 = function() { if (index < values[1].length) { data1.addRows([values[1][index]]); stepchart.draw(data1, options); index++; } else { if (index2 < values[0].length) { data1.setValue(index2, 1, values[0][index2][1]); stepchart.draw(data1, options); index2++; } } }; google.visualization.events.addListener( stepchart, "animationfinish", animate1 ); stepchart.draw(data1, options); animate1(); }
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="line"></div> <div id="step"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.