Question

我学习如何从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>

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

Answer 1

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

只需要一个load语句
可以根据需要加载'packages'个

callback触发后，即可开始绘图

请参阅以下工作代码段...

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何在一个页面上放置2个谷歌图表

1 个答案: