Нарисуйте несколько диаграмм

На этой странице показано, как нарисовать несколько диаграмм на одной веб-странице.

Нарисуйте несколько диаграмм на одной странице

Если вы хотите нарисовать несколько диаграмм на одной веб-странице, включите следующий код в <head> страницы:

  • Загрузите все пакеты, необходимые для ваших диаграмм, одним вызовом google.charts.load() .
  • Для каждой диаграммы на странице добавьте вызов google.charts.setOnLoadCallback() с обратным вызовом, который рисует диаграмму в качестве входных данных, например, google.charts.setOnLoadCallback(myPieChart) .

Например, предположим, что вы хотите нарисовать две круговые диаграммы, показывающие, сколько пиццы ваши друзья Сара и Энтони съели вчера вечером. В следующем примере показано, как отобразить обе диаграммы рядом.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <!--Table and divs that hold the pie charts--> <table class="columns"> <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> // Load Charts and the corechart package. google.charts.load('current', {'packages':['corechart']}); // Draw the pie chart for Sarah's pizza when Charts is loaded. google.charts.setOnLoadCallback(drawSarahChart); // Draw the pie chart for the Anthony's pizza when Charts is loaded. google.charts.setOnLoadCallback(drawAnthonyChart); // Callback that draws the pie chart for Sarah's pizza. function drawSarahChart() { // Create the data table for Sarah's pizza. var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows([ ['Mushrooms', 1], ['Onions', 1], ['Olives', 2], ['Zucchini', 2], ['Pepperoni', 1] ]); // Set options for Sarah's pie chart. var options = {title:'How Much Pizza Sarah Ate Last Night', width:400, height:300}; // Instantiate and draw the chart for Sarah's pizza. var chart = new google.visualization.PieChart(document.getElementById('Sarah_chart_div')); chart.draw(data, options); } // Callback that draws the pie chart for Anthony's pizza. function drawAnthonyChart() { // Create the data table for Anthony's pizza. var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows([ ['Mushrooms', 2], ['Onions', 2], ['Olives', 2], ['Zucchini', 0], ['Pepperoni', 3] ]); // Set options for Anthony's pie chart. var options = {title:'How Much Pizza Anthony Ate Last Night', width:400, height:300}; // Instantiate and draw the chart for Anthony's pizza. var chart = new google.visualization.PieChart(document.getElementById('Anthony_chart_div')); chart.draw(data, options); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <!--Table and divs that hold the pie charts--> <table class="columns"> <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> // Load Charts and the corechart package. google.charts.load('current', {'packages':['corechart']}); // Draw the pie chart for Sarah's pizza when Charts is loaded. google.charts.setOnLoadCallback(drawSarahChart); // Draw the pie chart for the Anthony's pizza when Charts is loaded. google.charts.setOnLoadCallback(drawAnthonyChart); // Callback that draws the pie chart for Sarah's pizza. function drawSarahChart() { // Create the data table for Sarah's pizza. var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows([ ['Mushrooms', 1], ['Onions', 1], ['Olives', 2], ['Zucchini', 2], ['Pepperoni', 1] ]); // Set options for Sarah's pie chart. var options = {title:'How Much Pizza Sarah Ate Last Night', width:400, height:300}; // Instantiate and draw the chart for Sarah's pizza. var chart = new google.visualization.PieChart(document.getElementById('Sarah_chart_div')); chart.draw(data, options); } // Callback that draws the pie chart for Anthony's pizza. function drawAnthonyChart() { // Create the data table for Anthony's pizza. var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows([ ['Mushrooms', 2], ['Onions', 2], ['Olives', 2], ['Zucchini', 0], ['Pepperoni', 3] ]); // Set options for Anthony's pie chart. var options = {title:'How Much Pizza Anthony Ate Last Night', width:400, height:300}; // Instantiate and draw the chart for Anthony's pizza. var chart = new google.visualization.PieChart(document.getElementById('Anthony_chart_div')); chart.draw(data, options); }

<html>
  <head>
    <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 pie chart for Sarah's pizza when Charts is loaded.
      google.charts.setOnLoadCallback(drawSarahChart);

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

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

        // Create the data table for Sarah's pizza.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 1],
          ['Onions', 1],
          ['Olives', 2],
          ['Zucchini', 2],
          ['Pepperoni', 1]
        ]);

        // Set options for Sarah's pie chart.
        var options = {title:'How Much Pizza Sarah Ate Last Night',
                       width:400,
                       height:300};

        // Instantiate and draw the chart for Sarah's pizza.
        var chart = new google.visualization.PieChart(document.getElementById('Sarah_chart_div'));
        chart.draw(data, options);
      }

      // Callback that draws the pie chart for Anthony's pizza.
      function drawAnthonyChart() {

        // Create the data table for Anthony's pizza.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 2],
          ['Onions', 2],
          ['Olives', 2],
          ['Zucchini', 0],
          ['Pepperoni', 3]
        ]);

        // Set options for Anthony's pie chart.
        var options = {title:'How Much Pizza Anthony Ate Last Night',
                       width:400,
                       height:300};

        // Instantiate and draw the chart for Anthony's pizza.
        var chart = new google.visualization.PieChart(document.getElementById('Anthony_chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <!--Table and divs that hold the pie charts-->
    <table class="columns">
      <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>


Использование одного обратного вызова для рисования нескольких диаграмм

В предыдущем примере используются два обратных вызова для рисования диаграмм, поскольку данные для двух диаграмм различны. Если вы хотите нарисовать несколько диаграмм для одних и тех же данных, может быть удобнее написать один обратный вызов для обеих диаграмм. Следующий пример иллюстрирует это.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <!--Table and divs that hold the pie charts--> <table class="columns"> <tr> <td><div id="piechart_div" style="border: 1px solid #ccc"></div></td> <td><div id="barchart_div" style="border: 1px solid #ccc"></div></td> </tr> </table> // Load Charts and the corechart and barchart packages. google.charts.load('current', {'packages':['corechart']}); // Draw the pie chart and bar chart when Charts is loaded. google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows([ ['Mushrooms', 3], ['Onions', 1], ['Olives', 1], ['Zucchini', 1], ['Pepperoni', 2] ]); var piechart_options = {title:'Pie Chart: How Much Pizza I Ate Last Night', width:400, height:300}; var piechart = new google.visualization.PieChart(document.getElementById('piechart_div')); piechart.draw(data, piechart_options); var barchart_options = {title:'Barchart: How Much Pizza I Ate Last Night', width:400, height:300, legend: 'none'}; var barchart = new google.visualization.BarChart(document.getElementById('barchart_div')); barchart.draw(data, barchart_options); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <!--Table and divs that hold the pie charts--> <table class="columns"> <tr> <td><div id="piechart_div" style="border: 1px solid #ccc"></div></td> <td><div id="barchart_div" style="border: 1px solid #ccc"></div></td> </tr> </table> // Load Charts and the corechart and barchart packages. google.charts.load('current', {'packages':['corechart']}); // Draw the pie chart and bar chart when Charts is loaded. google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows([ ['Mushrooms', 3], ['Onions', 1], ['Olives', 1], ['Zucchini', 1], ['Pepperoni', 2] ]); var piechart_options = {title:'Pie Chart: How Much Pizza I Ate Last Night', width:400, height:300}; var piechart = new google.visualization.PieChart(document.getElementById('piechart_div')); piechart.draw(data, piechart_options); var barchart_options = {title:'Barchart: How Much Pizza I Ate Last Night', width:400, height:300, legend: 'none'}; var barchart = new google.visualization.BarChart(document.getElementById('barchart_div')); barchart.draw(data, barchart_options); }

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

      // Draw the pie chart and bar chart when Charts is loaded.
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        var piechart_options = {title:'Pie Chart: How Much Pizza I Ate Last Night',
                       width:400,
                       height:300};
        var piechart = new google.visualization.PieChart(document.getElementById('piechart_div'));
        piechart.draw(data, piechart_options);

        var barchart_options = {title:'Barchart: How Much Pizza I Ate Last Night',
                       width:400,
                       height:300,
                       legend: 'none'};
        var barchart = new google.visualization.BarChart(document.getElementById('barchart_div'));
        barchart.draw(data, barchart_options);
      }
    </script>
  </head>
<body>
    <!--Table and divs that hold the pie charts-->
    <table class="columns">
      <tr>
        <td><div id="piechart_div" style="border: 1px solid #ccc"></div></td>
        <td><div id="barchart_div" style="border: 1px solid #ccc"></div></td>
      </tr>
    </table>
  </body>
</html>