个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 15:58:02 26 4
gpt4 key购买 nike

我从 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/

26 4 0
文章推荐： css - 无论内容如何，​​表格中的相同宽度/高度列，动态调整大小
文章推荐： html - 带有按钮的垂直和水平居中数据列表框
文章推荐： css - 无法弄清楚正在应用/继承哪个 css 属性
文章推荐： hta - 如何以隐藏模式运行 HTA