在同一页面中制作两个Google图表

时间:2016-02-05 11:39:10

标签: javascript charts

我正在试图放置两个相同风格的谷歌图表,但是当我尝试它时,一个是可见的,一个没有出现。

所以,这是代码。

      google.charts.load('current', {'packages':['bar']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales'],
      ['2014', 1000],
      ['2015', 1170],
      ['2016', 660],
      ['2017', 1030]
    ]);

    var options = {
      chart: {
        title: 'Company Performance',
        subtitle: 'Sales, Expenses, and Profit: 2014-2017',
      }
    };

    var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

    chart.draw(data, options);
  }

我需要更改哪些变量来制作这样的其他图表?

1 个答案:

答案 0 :(得分:0)

脚本正在寻找id选择器,在html中id是唯一的

所以添加一个带有antoher id的新div并在脚本末尾执行

var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
var chartOther = new google.charts.Bar(document.getElementById('columnchart_material_other'));

chart.draw(data, options);
chartOther.draw(data, options );

如果你想使用一个类名,你可以为类所有元素绘制相同的图表,如下所示:

var charts = document.getElementsByClassName("yourclass");
for (var i = 0; i < charts; i++) {
    var chart = new google.charts.Bar(charts[i]);
    chart.draw(data, options);

};