如何使用谷歌图表API添加新列及其数据

时间:2016-07-13 16:48:35

标签: html google-visualization linechart

我有想法如何在“乔治”之后添加新的人物,以及它在1月到4月的动态数据。我怎样才能达到理想的效果?这是我正在使用的代码:

<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Wilson', 'Jennifer','George'],
      ['Jan',  1000,      400,88],
      ['Feb',  1170,      460,99],
      ['March',  660,       1120,55],
      ['April',  1030,      540,33]
    ]);

    var options = {
      title: 'Company Performance',
      curveType: 'function',
      legend: { position: 'bottom' },
      pointSize: 20,
      pointShape: 'square'

    };

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
    //data.addColumn('summit');
    chart.draw(data, options);
  }
</script>

1 个答案:

答案 0 :(得分:0)

使用addColumn方法
您可以保存返回的列索引以更新行
如果你想添加多个列

在以下示例中,新列的值是从前一列计算的

&#13;
&#13;
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Wilson', 'Jennifer','George'],
    ['Jan',  1000,      400,88],
    ['Feb',  1170,      460,99],
    ['March',  660,       1120,55],
    ['April',  1030,      540,33]
  ]);

  var colIndex = data.addColumn('number', 'New');
  for (var i = 0; i < data.getNumberOfRows(); i++) {
    data.setValue(i, colIndex, data.getValue(i, colIndex - 1) * 2);
  }

  var options = {
    title: 'Company Performance',
    curveType: 'function',
    legend: { position: 'bottom' },
    pointSize: 20,
    pointShape: 'square'

  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
&#13;
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
&#13;
&#13;
&#13;