谷歌可视化折线图动画空白

Question

I have created a line chart with a 'select' event listener. 我创建了一个带有“选择”事件监听器的折线图。 When an item in the chart legend is clicked I alter the view of the chart. 单击图表图例中的项目时，我会更改图表的视图。

I can get the data to change but I can't get the chart to animate. 我可以更改数据，但无法获取图表的动画。

The lines on the chart disappear for the animation 'duration' period and then new lines are drawn. 图表上的线条在动画“持续时间”期间消失，然后绘制新的线条。 When I remove the animation portion from the options map in the ChartWrapper the action of clearing the chart no longer takes place so it does seem to be registering my animation request. 当我从ChartWrapper的选项映射中删除动画部分时，清除图表的操作不再发生，因此它似乎正在注册我的动画请求。

I was wondering if anyone could give me some advice on how to trouble shoot these types of animation problems because I really have no idea what is going on. 我想知道是否有人可以给我一些有关如何解决这类动画问题的建议，因为我真的不知道发生了什么。

I guess I'm kind of looking for the PMDAS(mathematical order of operations) of google charts animation.. 我想我正在寻找Google图表动画的PMDAS（运算的数学顺序）。

Code: 码：

<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);

Answer 1

The problem stems from your ID's. 问题出在您的身份证件上。 It seems that the charts have an undocumented behavior that tracks data series by column ID (if specified). 图表似乎具有未记录的行为，可以按列ID（如果指定）跟踪数据序列。 Since your ID's for columns 1 and 3 are different, the chart removes the series with id "a" and adds two new series with id's "b" and "c". 由于第1列和第3列的ID不同，因此图表会删除ID为“ a”的系列，并添加ID为“ b”和“ c”的两个新系列。 New series are not animated, which is why the animations appear broken. 新系列没有动画，这就是为什么动画看起来不完整的原因。 If you remove the ID's on columns 1, 3, and 5 (or give columns 1 and 3 the same ID) the chart will animate the way you expect it to: 如果删除第1、3和5列上的ID（或为第1和3列赋予相同的ID），则图表将以您期望的方式进行动画处理：

var chartData = new google.visualization.DataTable({
    'cols': [
        {'id': 'a', 'label': 'A','type': 'number', 'p': {'role': 'domain'}},
        {'label': 'A','type': 'number', 'p': {'role': 'data'}},
        {'id': 'a_', 'label': null, 'type': 'boolean', 'p': {'role':'certainty'}},
        {'label': 'B','type': 'number', 'p': {'role': 'data'}},
        {'id': 'b_', 'label': null, 'type': 'boolean', 'p': {'role':'certainty'}},
        {'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}]}
    ]
});

See working example: http://jsfiddle.net/asgallant/b7W68/ 参见工作示例： http : //jsfiddle.net/asgallant/b7W68/

谷歌可视化折线图动画空白

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-03-25 15:32:19

谷歌可视化折线图动画空白

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-03-25 15:32:19

解决方案1
1 已采纳 2014-03-25 15:32:19