Question

我需要在一个网页上创建两个条形图。我已经通读了并在stackoverflow上的每个相关问题中尝试了解决方案，我无法理解为什么我可以使用当前代码查看一个图表而不是两个图表。据我所知，我的代码与某些解决方案相同。 在单个网页上创建两个条形图需要更改哪些内容？

此代码由谷歌和其他在线资源编译，创建一个图表（文件保存为.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>

Answer 1

您的代码中未定义

options2，您调用draw chart方法两次，而不是在chart2上调用它：

chart.draw(data2, options2);

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

chart2.draw(data2, options);

Google在一个页面上绘制了两个条形图

1 个答案: