Question

我创建了一个带有＆＃39;选择＆＃39;的折线图。事件监听器。单击图表图例中的项目时，我会更改图表的视图。

我可以更改数据，但我无法让图表生成动画。

图表上的线条会因动画“＃”持续时间而消失。期间然后绘制新线。当我从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);

Answer 1

问题源于你的身份证。似乎图表具有未记录的行为，按列ID（如果指定）跟踪数据系列。由于第1列和第3列的ID不同，因此图表会删除ID为“a”的系列，并添加两个ID为“b”和“c”的新系列。新系列没有动画，这就是动画出现故障的原因。如果删除第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}]}
    ]
});

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

谷歌可视化线图动画空白

1 个答案: