Как переключать 2 графика с помощью кнопок - PullRequest
Новая
       9

Как переключать 2 графика с помощью кнопок

1 голос
/ 26 октября 2019

У меня есть страница, на которой нужно сравнить 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 кнопок может решить эту проблему, но я пытаюсь уменьшить количество кнопок

1 Ответ

0 голосов
/ 26 октября 2019

вы можете инициализировать кнопки в обратном вызове загрузки,
и передавать тип диаграммы в функции рисования ...

примечание: я добавил жестко закодированные данные для примера,
Вы можете добавить обратно свои данные 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>
...