多线图动画代码修改谷歌图表

Question

我从这里找到了代码：On load Google LineChart animation

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

如果我想创建多行，如何修改这段代码？谢谢！我不是一个javascript程序员，不熟悉OOP作者是OneMoreVladimir，但我没有在他的帖子下发表评论的权限。

Answer 1

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.addColumn('number', 'Sales2');
    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": 8
      },
      "hAxis": {
        "slantedTextAngle": "45",
        "slantedText": "true"
      },
      "legend": {
        "position": "top"
      },
      "pointSize": "5",
      animation: {
        duration: 600
      }
    };
    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);
      }
    }

    var index1 = 0;
    var chartData1 = [1, 3, 4, 6, 5]
    var drawChart1 = function() {
      console.log('drawChart1 index1 ' + index1);
      if (index1 < chartData1.length) {
        data.setValue(index1, 2, chartData1[index1++]);
        chart.draw(data, options);
      }
    }
    google.visualization.events.addListener(chart, 'animationfinish', drawChart);
    google.visualization.events.addListener(chart, 'animationfinish', drawChart1);
    chart.draw(data, options);
    drawChart();
    drawChart1();
  }
});

我弄明白！这是代码。

但另一个问题，代码通过http://jsfiddle.net并运行得很好，但当我复制粘贴到HTML为什么它不起作用？我错过了什么？