【发布时间】：2014-03-25 23:32:19
【问题描述】：
我创建了一个带有“选择”事件侦听器的折线图。单击图表图例中的项目时，我会更改图表的视图。
我可以更改数据，但我无法让图表设置动画。
图表上的线条在动画“持续时间”期间消失，然后绘制新线条。当我从 ChartWrapper 中的选项映射中删除动画部分时，不再执行清除图表的操作，因此它似乎正在注册我的动画请求。
我想知道是否有人可以就如何解决这些类型的动画问题给我一些建议，因为我真的不知道发生了什么。
我想我正在寻找谷歌图表动画的 P.M.D.A.S.（数学运算顺序）..
代码：
<html>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart', 'controls']});
function drawVisualization() {
var chartData = new google.visualization.DataTable({
'cols': [
{'id': 'a', 'label': 'A','type': 'number', 'p': {'role': 'domain'}},
{'id': 'a', 'label': 'A','type': 'number', 'p': {'role': 'data'}},
{'id': 'a_', 'label': null, 'type': 'boolean', 'p': {'role':'certainty'}},
{'id': 'b', 'label': 'B','type': 'number', 'p': {'role': 'data'}},
{'id': 'b_', 'label': null, 'type': 'boolean', 'p': {'role':'certainty'}},
{'id': 'c', 'label': 'C','type': 'number', 'p': {'role': 'data'}},
{'id': 'c_', 'label': null, 'type': 'boolean', 'p': {'role':'certainty'}}
],
'rows':[
{'c': [{'v': 0, 'f': 'date string'}, {'v': 1, 'f': null}, {'v': true, 'f': null}, {'v': 1, 'f': null}, {'v': true, 'f': null}, {'v': 1, 'f': null}, {'v': true, 'f': null}]},
{'c': [{'v': 1, 'f': 'date string'}, {'v': 2, 'f': null}, {'v': false, 'f': null}, {'v': 3, 'f': null}, {'v': true, 'f': null}, {'v': 4, 'f': null}, {'v': false, 'f': null}]},
{'c': [{'v': 2, 'f': 'date string'}, {'v': 3, 'f': null}, {'v': true, 'f': null}, {'v': 2, 'f': null}, {'v': true, 'f': null}, {'v': 1, 'f': null}, {'v': true, 'f': null}]}
]
});
var score_chart = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'score_chart',
'dataTable': chartData,
'options': {
animation:{
duration: 1000,
easing: 'out'
},
curveType: "function"
},
view: {columns: [0,1,2]}
});
var score_check = google.visualization.events.addListener(score_chart, 'ready', function(){
google.visualization.events.removeListener(score_check);
var score_select = google.visualization.events.addListener(score_chart, 'select', function(){
var selection = score_chart.getChart().getSelection();
if (selection.length) {
score_chart.setView({'columns': [0,3,4,5,6]});
score_chart.draw();
};
});
});
score_chart.draw();
};
google.setOnLoadCallback(drawVisualization);
【问题讨论】：
-
线条消失可能是由于许多不同的问题，从数据组织到 API 加载问题再到图表中的错误。如果您可以分享复制问题的代码，我可以查看并帮助您找出问题所在。
-
感谢英勇。我编辑了我的问题以包含您要求的代码。 标记和
标签： javascript animation charts google-visualization