Fatal编程技术网
  • javascript/
  • Javascript 谷歌可视化折线图动画空白

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

javascript animation charts google-visualization

Javascript 谷歌可视化折线图动画空白,javascript,animation,charts,google-visualization,Javascript,Animation,Charts,Google Visualization,我创建了一个带有“选择”事件侦听器的折线图。单击图表图例中的项目时，我会更改图表的视图 我可以更改数据，但无法使图表动画化 图表上的线条在动画“持续时间”期间消失，然后绘制新的线条。当我从ChartWrapper中的选项映射中删除动画部分时，清除图表的操作将不再发生，因此它似乎正在注册我的动画请求 我想知道是否有人能给我一些关于如何解决这些类型的动画问题的建议，因为我真的不知道发生了什么 我想我是在寻找谷歌图表动画的p.m.D.A.S.（数学运算顺序） 代码： <html> <

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

我可以更改数据，但无法使图表动画化

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


load（'visualization'，'1'，{packages:['corechart'，'controls']}）；
函数drawVisualization（）{
var chartData=new google.visualization.DataTable({
“科尔斯”：[
{'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'：'Certification'}，
{'id'：'b'，'label'：'b'，'type'：'number'，'p'：{'role'：'data'}，
{'id'：'b'，'label'：null，'type'：'boolean'，'p'：{'role'：'certability'}，
{'id'：'c'，'label'：'c'，'type'：'number'，'p'：{'role'：'data'}，
{'id'：'c'，'label'：null，'type'：'boolean'，'p'：{'role'：'Certification'}
],
“行”：[
{c'：[{v'：0，'f'：'日期字符串'}，{v'：1，'f'：null}，{v'：真，'f'：null}，{v'：1，'f'：null}，{v'：真，'f'：null}，{v'：真，'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'，'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({
“图表类型”：“线条图”，
“集装箱船”：“计分表”，
“dataTable”：图表数据，
“选项”：{
动画：{
持续时间：1000，
放松：“退出”
},
曲线类型：“函数”
},
视图：{列：[0,1,2]}
});
var score\u check=google.visualization.events.addListener（score\u图表'ready'，函数（）{
google.visualization.events.removeListener（分数检查）；
var score_select=google.visualization.events.addListener（score_图表，'select'，函数（）{
var selection=score_chart.getChart（）.getSelection（）；
if（选择.长度）{
score_chart.setView（{'columns'：[0,3,4,5,6]}）；
记分表绘制（）；
};
});
});
记分表绘制（）；
};
setOnLoadCallback（drawVisualization）；

问题源于您的ID。这些图表似乎有一个未记录的行为，它按列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}]}
    ]
});
请参阅工作示例：

行消失可能是由于许多不同的问题造成的，从数据组织到API加载问题，再到图表中的错误。如果你能分享复制问题的代码，我可以看一看，帮助你找出问题所在。谢谢你。我编辑了我的问题以包含您要求的代码。由于某种原因，标签和标签被切断了，但事实上它们就在那里。如果没有你的帮助，我永远不会明白这一点。非常感谢。