admin管理员组文章数量:1332896
I'm trying to implement loading animation of chart using transition animations by adding rows and refreshing the chart. But it behaves pletely differently from what I expect. Here is the Fiddle / Some code:
google.load('visualization', '1', { packages: ['corechart'], callback: function() {
var data = new google.visualization.DataTable();
data.addRows(5);
data.addColumn('string', '');
data.addColumn('number', 'Sales');
var options = {
title: 'Sales by months for 2013 year', curveType: 'function',
"vAxis": { "minValue": "0" }, "hAxis": { "slantedTextAngle": "45", "slantedText": "true" }, "legend": { "position": "top" }, "pointSize": "5",
animation: { duration: 1000 }
};
var chart = new google.visualization.LineChart(document.getElementById('test'));
var index = 0;
var chartData = [
['Jan', 5 ], ['Feb', 1], ['Mar', 4], ['Apr', 2], ['May', 3]
]
var drawChart = function() {
console.log('drawChart index ' + index);
if (index < chartData.length) {
data.addRows([chartData[index++]]);
chart.draw(data, options);
}
}
google.visualization.events.addListener(chart, 'ready', drawChart);
chart.draw(data, options);
}});
I'm trying to implement loading animation of chart using transition animations by adding rows and refreshing the chart. But it behaves pletely differently from what I expect. Here is the Fiddle http://jsfiddle/jATUX/ Some code:
google.load('visualization', '1', { packages: ['corechart'], callback: function() {
var data = new google.visualization.DataTable();
data.addRows(5);
data.addColumn('string', '');
data.addColumn('number', 'Sales');
var options = {
title: 'Sales by months for 2013 year', curveType: 'function',
"vAxis": { "minValue": "0" }, "hAxis": { "slantedTextAngle": "45", "slantedText": "true" }, "legend": { "position": "top" }, "pointSize": "5",
animation: { duration: 1000 }
};
var chart = new google.visualization.LineChart(document.getElementById('test'));
var index = 0;
var chartData = [
['Jan', 5 ], ['Feb', 1], ['Mar', 4], ['Apr', 2], ['May', 3]
]
var drawChart = function() {
console.log('drawChart index ' + index);
if (index < chartData.length) {
data.addRows([chartData[index++]]);
chart.draw(data, options);
}
}
google.visualization.events.addListener(chart, 'ready', drawChart);
chart.draw(data, options);
}});
Share
Improve this question
asked May 31, 2013 at 11:56
OneMoreVladimirOneMoreVladimir
1,6734 gold badges21 silver badges32 bronze badges
1 Answer
Reset to default 6Ok, I've managed to solve that. It's all a matter of using 'animationfinish' That now looks like http://jsfiddle/HDu8H/ or
google.load('visualization', '1', { packages: ['corechart'], callback: function() {
var data = new google.visualization.DataTable();
data.addRows(5);
data.addColumn('string', '');
data.addColumn('number', 'Sales');
data.addRows(5);
data.setValue(0, 0, 'Jan');
data.setValue(1, 0, 'Feb');
data.setValue(2, 0, 'Mar');
data.setValue(3, 0, 'Apr');
data.setValue(4, 0, 'May');
var options = {
title: 'Sales by months for 2013 year', curveType: 'function',
"vAxis": { "minValue": "0", "maxValue": 6 }, "hAxis": { "slantedTextAngle": "45", "slantedText": "true" }, "legend": { "position": "top" }, "pointSize": "5",
animation: { duration: 250 }
};
var chart = new google.visualization.LineChart(document.getElementById('test'));
var index = 0;
var chartData = [ 5, 1, 4, 2, 3 ]
var drawChart = function() {
console.log('drawChart index ' + index);
if (index < chartData.length) {
data.setValue(index, 1, chartData[index++]);
chart.draw(data, options);
}
}
google.visualization.events.addListener(chart, 'animationfinish', drawChart);
chart.draw(data, options);
drawChart();
}});
本文标签: javascriptOn load Google LineChart animationStack Overflow
版权声明:本文标题:javascript - On load Google LineChart animation - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742307065a2450127.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论