Question

当我使用时，我需要在单个页面中绘制饼图和柱形图包'bar'它可以绘制柱形图而不是饼图

google.charts.load('current', {'packages':['bar']});
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

    chart.draw(data, google.charts.Bar.convertOptions(options));

当我使用'corechart'包时，它会绘制饼图，但不能绘制柱形图（但能绘制条形图）

google.charts.load("current", {packages:["corechart"]});
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
    chart.draw(data, options);

如何在一个页面中绘制两个图形？

Answer 1

你可以这样做： -

google.charts.load('current', {packages: ['corechart','bar']});//add multiple packages
google.charts.setOnLoadCallback(drawMaterial); //call there corresponsing draw functions
google.charts.setOnLoadCallback(drawChart);//call there corresponsing draw functions
function drawMaterial() { // add each function definition
  var data = google.visualization.arrayToDataTable([
    ['City', '2010 Population', '2000 Population'],
    ['New York City, NY', 8175000, 8008000],
    ['Los Angeles, CA', 3792000, 3694000],
    ['Chicago, IL', 2695000, 2896000],
    ['Houston, TX', 2099000, 1953000],
    ['Philadelphia, PA', 1526000, 1517000]
  ]);

  var materialOptions = {
    chart: {
      title: 'Population of Largest U.S. Cities'
    },
    hAxis: {
      title: 'Total Population',
      minValue: 0,
    },
    vAxis: {
      title: 'City'
    },
    bars: 'horizontal'
  };
  var materialChart = new google.charts.Bar(document.getElementById('chart_div'));//draw on different-different elements
  materialChart.draw(data, materialOptions);
}

function drawChart() {// add each function definition

  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'));//draw on different-different elements

  chart.draw(data, options);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

如何在单个页面中绘制饼图和柱形图

1 个答案: