javascript - 如何将 2 个谷歌图表放在一页上

我从 https://developers.google.com/chart/interactive/docs/gallery/columnchart 学习如何创建条形图和饼图和 https://developers.google.com/chart/interactive/docs/gallery/piechart 。但我就是无法在同一页面上获得两个图表。我的代码如下:

<html>
<head>
<!--pie chart-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     11],
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Sleep',    7]
    ]);

    var options = {
      title: 'My Daily Activities'
    };

    var chart = new        
google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
  }
</script>


<!--bar chart-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['bar']});
  google.charts.setOnLoadCallback(drawBar);

  function drawBar() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses', 'Profit'],
      ['2014', 1000, 400, 200],
      ['2015', 1170, 460, 250],
      ['2016', 660, 1120, 300],
      ['2017', 1030, 540, 350]
    ]);

    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);
  }
</script>
</head>

<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<br>
<div id="columnchart_material" style="width: 900px; height: 500px;"></div>

</body>
</html>

有人可以给我一些建议吗？非常感谢。

最佳答案

首先，只需要引用loader.js一次

并且只需要一个load语句
它可以根据需要加载尽可能多的'packages'

一旦回调触发，您就可以开始绘图

<小时/>

请参阅以下工作片段...

google.charts.load('current', {
  callback: function () {
    drawChart();
    drawBar();
  },
  packages: ['bar', 'corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work',     11],
    ['Eat',      2],
    ['Commute',  2],
    ['Watch TV', 2],
    ['Sleep',    7]
  ]);

  var options = {
    title: 'My Daily Activities'
  };

  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
}

function drawBar() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses', 'Profit'],
    ['2014', 1000, 400, 200],
    ['2015', 1170, 460, 250],
    ['2016', 660, 1120, 300],
    ['2017', 1030, 540, 350]
  ]);

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

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<br>
<div id="columnchart_material" style="width: 900px; height: 500px;"></div>

关于javascript - 如何将 2 个谷歌图表放在一页上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42527685/

javascript - 如何将 2 个谷歌图表放在一页上

上一篇：javascript - 带有 angularjs 模板的 Visjs 时间线

下一篇：javascript - 在 ajax 调用中传递 Controller 中方法的 url