谷歌在一页上绘制两个条形图答案

【问题标题】：Google charts two bar charts on one page谷歌在一页上绘制两个条形图
【发布时间】：2014-08-20 17:59:58
【问题描述】：

我需要在一个网页上创建两个条形图。我已通读并尝试了有关 stackoverflow 的每个相关问题的解决方案，但我无法弄清楚为什么我可以使用当前代码查看一个图表但不能查看两个图表。据我所知，我的代码与某些解决方案相同。 要在一个网页上创建两个条形图，我需要进行哪些更改？

这段代码，从google和其他在线资源编译，创建一个图表（文件保存为.html）：

    <!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

  // Load the Visualization API and the piechart package.
  google.load('visualization', '1.0', {'packages':['corechart']});

  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawChart);

  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart() {

  // Create the data table.
     var data = google.visualization.arrayToDataTable([
    ['Item', 'Yes', { role: 'tooltip' } ,'No',  { role: 'tooltip' } ],
    ['Var A',   .5 , '', .5,  ''],
    ['Var B', .9, '', .1,  ''],
  ]);

  var options = {
    width: 250,
    height: 150,
    backgroundColor: '#FFFFF0',
    legend: { position: 'none'},
    hAxis:{ textPosition: 'none', gridlines: {color:'grey', count: 2}},
    bar: { groupWidth: '75%' },
    isStacked: true,
    colors: ['#FF6600', '#FFFFF0'],
  };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
    draw(chart);
    </script>
  </head>

<body>
<!--Div that will hold the bar chart-->
<div id="chart_div"></div>
</body>

根据我的研究，我认为以下代码应该创建两个图表，但会出现一个图表。这是我需要更改的代码：

    <!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

  // Load the Visualization API and the piechart package.
  google.load('visualization', '1.0', {'packages':['corechart']});

  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawChart);

  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart() {

  // Create the data table.
     var data = google.visualization.arrayToDataTable([
        ['Item', 'Yes', { role: 'tooltip' } ,'No',  { role: 'tooltip' } ],
        ['Var A',   .5 , '', .5,  ''],
        ['Var B', .9, '', .1,  ''],
    ]);
     var data2 = google.visualization.arrayToDataTable([
        ['Item', 'Yes', { role: 'tooltip' } ,'No',  { role: 'tooltip' } ],
        ['Var A',   .2 , '', .8,  ''],
        ['Var B', .8, '', .2,  ''],
    ]);

     var options = {
       width: 250,
       height: 150,
       backgroundColor: '#FFFFF0',
       legend: { position: 'none'},
       hAxis:{ textPosition: 'none', gridlines: {color:'grey', count: 2}},
       bar: { groupWidth: '75%' },
       isStacked: true,
       colors: ['#FF6600', '#FFFFF0'],
     };

    // Instantiate and draw our chart, passing in some options.
     var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
     chart.draw(data, options);
     var chart2 = new google.visualization.BarChart(document.getElementById('chart_div2'));
     chart.draw(data2, options2);
  }
    draw(chart);
    draw(chart2);
</script>
</head>

<body>
<!--Div that will hold the bar charts-->
<div id="chart_div"></div>
<div id="chart_div2"></div>
</body>

更新：这是工作代码，已调试：

    <!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript"> 

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {

// Create the data table.
var data = google.visualization.arrayToDataTable([
    ['Item', 'Yes', { role: 'tooltip' } ,'No',  { role: 'tooltip' } ],
    ['Var A',   .5 , '', .5,  ''],
    ['Var B', .9, '', .1,  ''],
]);
var data2 = google.visualization.arrayToDataTable([
    ['Item', 'Yes', { role: 'tooltip' } ,'No',  { role: 'tooltip' } ],
    ['Var A',   .2 , '', .8,  ''],
    ['Var B', .8, '', .2,  ''],
]);

var options = {
    width: 250,
    height: 150,
    backgroundColor: '#FFFFF0',
    legend: { position: 'none'},
    hAxis:{ textPosition: 'none', gridlines: {color:'grey', count: 2}},
    bar: { groupWidth: '75%' },
    isStacked: true,
    colors: ['#FF6600', '#FFFFF0'],
 };

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
var chart2 = new google.visualization.BarChart(document.getElementById('chart_div2'));
chart.draw(data2, options2);
}

draw(chart);
draw(chart2);
</script>
</head>

<body>
<!--Div that will hold the bar charts-->
<div id="chart_div"></div>
<div id="chart_div2"></div>
</body>

【问题讨论】：

标签： javascript charts google-visualization

【解决方案1】：

options2 没有在你的代码中定义，你调用了chart 的draw 方法两次，而不是在chart2 上调用它：

chart.draw(data2, options2);

您可以将options 重复用于第二个图表，也可以创建一个新的选项对象。这可能是您想要使用的：

chart2.draw(data2, options);

【讨论】：