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

【问题标题】：How to toggle 2 charts using buttons如何使用按钮切换 2 个图表
【发布时间】：2019-10-26 01:28:58
【问题描述】：

我有一个页面需要比较饼图和条形图之间的 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 个按钮可能可以解决此问题，但我正在尝试减少更多按钮

【问题讨论】：

在您的代码中，Pie Button.Onclick 之后有额外的 drawBar();}
@Fussionweb 页面加载时需要在不点击任何按钮的情况下显示图表吗？还是我做错了？
我认为你在调用 drawBar 函数后得到了额外的}
@Fussionweb 感谢您的及时回复，这是为了关闭“drawAnthonyChart”功能。

标签： php html charts google-visualization

【解决方案1】：

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

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

请参阅以下工作 sn-p...

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>

【讨论】：

谢谢！这正是我正在寻找的。在旁注中，我如何添加工具栏以便我可以导出/下载为 csv 和 pdf？
检查这些答案 --> csv & pdf