Question

我有一个页面需要比较饼图和条形图之间的2种不同数据，有2个按钮可在它们之间进行切换，但仅适用于1种图表

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load Charts and the corechart package.
google.charts.load('current', {'packages':['corechart']});

// Draw the Sarah's chart when Charts is loaded.
google.charts.setOnLoadCallback(drawSarahChart);

// Draw the Anthony's chart when Charts is loaded.
google.charts.setOnLoadCallback(drawAnthonyChart);

// Callback that draws the chart for Sarah's.
function drawSarahChart() {


    var chart = new google.visualization.ChartWrapper({
containerId: 'Sarah_chart_div'
});
    var data = google.visualization.arrayToDataTable([
        ['Year','location'],
        <?php 
              while($row=mysqli_fetch_array($res))
              {
                  echo "['".$row["locationid"]."',".$row["number"]."],";
              } ?>

              ]);

    var options = {title:'FY 2018',
            width:400,
            height:300};


    var barsButton = document.getElementById('b1');
var PieButton = document.getElementById('b2');

chart.setOptions(options);

function drawBars() {
chart.setChartType('ColumnChart');
chart.setDataTable(data);
chart.draw();
}

function drawPie() {
chart.setChartType('PieChart');
chart.setDataTable(data);
chart.draw();
}

barsButton.onclick = function () {
drawBars();
}

PieButton.onclick = function () {
drawPie();
}
drawBars();
}

// Callback that draws the chart for Anthony's.
function drawAnthonyChart() {
    var chart = new google.visualization.ChartWrapper({
        containerId: 'Anthony_chart_div'
        });
    // Create the data table for Anthony's pizza.
    var data = google.visualization.arrayToDataTable([
          ['Year','location'],
     <?php 
              while($row=mysqli_fetch_array($res2))
              {
                  echo "['".$row["roleid"]."',".$row["number"]."],";
              } ?>

              ]);

    // Set options for Anthony's pie chart.
    var options = {title:'FY 2019',
    width:400,
    height:300};


    var barsButton = document.getElementById('b1');
var PieButton = document.getElementById('b2');

chart.setOptions(options);

function drawBars() {
chart.setChartType('ColumnChart');
chart.setDataTable(data);
chart.draw();
}

function drawPie() {
chart.setChartType('PieChart');
chart.setDataTable(data);
chart.draw();
}

barsButton.onclick = function () {
drawBars();
}

PieButton.onclick = function () {
drawPie();
}
drawBars();
}

    </script>   
    <body>
   <input type = 'button' id = 'b1' value = 'Draw Bar Chart' />
    <input type = 'button' id = 'b2' value = 'Draw Pie Chart' />
    <table>
  <tr>
<td><div id="Sarah_chart_div" style="border: 1px solid #ccc"></div></td>
<td><div id="Anthony_chart_div" style="border: 1px solid #ccc"></div></td>
    </tr>
    </table>

    </body>


</html>

该按钮应该能够同时更改两个图表，添加另外2个按钮可能可以解决此问题，但是我正尝试减少更多按钮

Answer 1

您可以在加载回调中初始化按钮，
并将图表类型传递给绘图函数...

注意：我出于示例目的添加了硬编码数据，
您可以添加回您的PHP数据。

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function() {
  var barsButton = document.getElementById('b1');
  var pieButton = document.getElementById('b2');

  barsButton.onclick = function() {
    drawSarahChart('ColumnChart');
    drawAnthonyChart('ColumnChart');
  }

  pieButton.onclick = function() {
    drawSarahChart('PieChart');
    drawAnthonyChart('PieChart');
  }

  drawSarahChart('ColumnChart');
  drawAnthonyChart('ColumnChart');
});

function drawSarahChart(chartType) {
  var chart = new google.visualization.ChartWrapper({
    containerId: 'Sarah_chart_div'
  });

  var data = google.visualization.arrayToDataTable([
    ['Year', 'location'],
    ['A', 100],
    ['B', 120]
  ]);

  var options = {
    title: 'FY 2018',
    width: 400,
    height: 300
  };

  chart.setOptions(options);
  chart.setChartType(chartType);
  chart.setDataTable(data);
  chart.draw();
}

function drawAnthonyChart(chartType) {
  var chart = new google.visualization.ChartWrapper({
    containerId: 'Anthony_chart_div'
  });

  var data = google.visualization.arrayToDataTable([
    ['Year', 'location'],
    ['A', 100],
    ['B', 120]
  ]);

  var options = {
    title: 'FY 2019',
    width: 400,
    height: 300
  };

  var barsButton = document.getElementById('b1');
  var pieButton = document.getElementById('b2');

  chart.setOptions(options);
  chart.setChartType(chartType);
  chart.setDataTable(data);
  chart.draw();
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<input type='button' id='b1' value='Draw Bar Chart' />
<input type='button' id='b2' value='Draw Pie Chart' />
<table>
  <tr>
    <td>
      <div id="Sarah_chart_div" style="border: 1px solid #ccc"></div>
    </td>
    <td>
      <div id="Anthony_chart_div" style="border: 1px solid #ccc"></div>
    </td>
  </tr>
</table>

如何使用按钮切换2个图表

1 个答案: