Как разместить два Графика Google charts на одной странице

Я создаю веб-приложение, в котором используются два графика, питание от базы. Использование api Google, google charts. Однако, появляется только первый график, а другой-это пустое.

    <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

  </head>
  <body>

<script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data1 = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options1 = {
          title: 'teste 1',
          is3D: true,
        };

        var chart1 = new google.visualization.PieChart(document.getElementById('teste1'));
        chart1.draw(data1, options1);
      }
    </script>


   <div id="teste1" style="width: 600px; height: 300px;"></div>


 <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'teste 2',
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('teste'));
        chart1.draw(data, options);
      }
    </script>

    <div id="teste" style="width: 600px; height: 300px;"></div>
  </body>
</html>

inserir a descrição da imagem aqui

Author: alexjosesilva, 2016-06-16
Source

2 answers

Google Charts ошибка времени, что позволяет более диаграмма, нажмите на одной странице.

Google удалось упаковать в настоящее время эта ошибка,я советую вам прочитать эту документацию по этому вопросу :

Https://developers.google.com/chart/interactive/docs/basic_load_libs#frozen-versions

Также посмотреть на этой странице, которая говорит на ту же тему, что и ваш, и, как удалось убрать :

Https://groups.google.com/forum/?utm_medium=email&utm_source=footer#!msg/google-visualization-api/KulpuT418cg/yZieM8buCQAJ

Тоже уже ответил на этот вопрос на SO,вот ссылка :

Https://stackoverflow.com/questions/33128087/multiple-google-charts

Оцените, также взгляните на документацию, как рисовать несколько charts :

Https://developers.google.com/chart/interactive/docs/basic_multiple_charts#draw-multiple-charts-on-one-page

 2
Author: Falion, 2017-05-23 12:37:26

Вот...это Легко, просто следуйте примеру:

google.charts.load('current', {'packages': ['corechart'], 'language': 'pt-br'});
google.charts.setOnLoadCallback(drawChartExemplo1);
function drawChartExemplo1() {

var data = google.visualization.arrayToDataTable([
    ['Unidades', 'ValorTotal'],
    ['São Paulo', 14000.45],
    ['Rio de Janeiro', 44000.00],
    ['Bahia', 69000.99],
    ['Amazonia', 35000.00]
]);

var options = {
    title: 'Exemplo de Grafico em Pizza 2',
    is3D: true,
    pieSliceText: 'value',
    legend: {
        position: 'labeled', 
        textStyle: {
            fontSize: 12,
            color: '#25476a',
            bold: true,
            italic: false}
    }
};

var chart = new google.visualization.PieChart(document.getElementById('pieChart'));

//Para fomatando a variavel formatter para fazer a conversão.
var formatter = new google.visualization.NumberFormat({
    decimalSymbol: ',',
    groupingSymbol: '.',
    negativeColor: 'red',
    negativeParens: true,
    prefix: 'R$ '
});

//Para converter o valores da pizza para real.
formatter.format(data, 1);

chart.draw(data, options);
};

///////////////////////////////////////////////////////////////////////////////////////////////////

//2° Grafico
google.charts.load('current', {'packages': ['corechart'], 'language': 'pt-br'});
google.charts.setOnLoadCallback(drawChartExemplo2);
function drawChartExemplo2() {

var data = google.visualization.arrayToDataTable([
    ['Unidades', 'ValorTotal'],
    ['New York', 4000.45],
    ['California', 800.00],
    ['São Francisco', 6000.99],
    ['Miami', 3000.00]
]);

var options = {
    title: 'Exemplo de Grafico em Pizza 2',
    is3D: true,
    pieSliceText: 'value',
    legend: {
        position: 'labeled', 
        textStyle: {
            fontSize: 12,
            color: '#25476a',
            bold: true,
            italic: false}
    }
};

var chart = new google.visualization.PieChart(document.getElementById('pieChart2'));

//Para fomatando a variavel formatter para fazer a conversão.
var formatter = new google.visualization.NumberFormat({
    decimalSymbol: ',',
    groupingSymbol: '.',
    negativeColor: 'red',
    negativeParens: true,
    prefix: 'R$ '
});

//Para converter o valores da pizza para real.
formatter.format(data, 1);

chart.draw(data, options);
};

 0
Author: Vergil Wallace, 2020-01-29 15:15:23