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

Make Two Google charts in the same page

本文关键字：两个 谷歌 一页      更新时间：2023-09-26

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

所以，这是代码。

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

我需要更改哪些变量才能制作这样的其他图表？

脚本正在寻找 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 );

如果你想使用类名，你可以用类 Some 为所有元素绘制相同的图表，如下所示： 

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