Подтвердить что ты не робот

Как добавить две диаграммы Google на одну страницу?

Что я сделал

Я добавил диаграмму Google в голову моей страницы. Это возвращает изображение графика.

Что мне нужно сделать

Мне просто нужно добавить второй график на ту же страницу.

Проблема

Код для второго графика игнорируется. Я в основном подозреваю, что это связано с неправильным сочетанием кода для каждой диаграммы.

Код

Первая диаграмма (строка):

    <!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

  // Load the Visualization API and the piechart package.
  google.load('visualization', '1.0', {'packages':['corechart']});

  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawChart);

  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart() {

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Month');
    data.addColumn('number', 'Apples');
    data.addColumn('number', 'Oranges');
    data.addRows([
      ['Oct 11', 20, 0],
      ['Nov 11', 0, 0],
      ['Dec 12',  0, 20],
      ['Jan 12', 0, 10],
      ['Feb 12', 0, 10],
      ['March 12', 10, 10]
    ]);

    // Set chart options
    var options = {'width':960,
                   'height':300};

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
    chart.draw(data, options);
  }

</script>

Второй график (pie):

    <!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

  // Load the Visualization API and the piechart package.
  google.load('visualization', '1.0', {'packages':['corechart']});

  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawChart);

  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart() {

    // Create the data table.
    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]
    ]);

    // Set chart options
    var options = {'title':'How Much Pizza I Ate Last Night',
                   'width':400,
                   'height':300};

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

Каждая из диаграмм вызывается в теле с использованием контейнера div с уникальным идентификатором:

<div id="chart_div"></div>

Мой вопрос

Как сшить эти два блока кода вместе? Я попытался скопировать drawChart() и указать уникальные имена функций и переменные, но безрезультатно.

4b9b3361

ОТВЕТЫ

Ответ 1

Решение

Теперь у меня есть рабочее решение. Он включал определение того, какие части кода примера дублировать и что не дублировать (как было предложено Oofpez). Данные, параметры и переменные диаграммы для каждого из ваших диаграмм определены в функции ONE drawChart().

Вот рабочий пример (просто скопируйте и вставьте в документ HTML):

... Этот пример далее демонстрирует, как объединить разные типы диаграмм, то есть pie и line...

<html>
      <head>
        <!--Load the AJAX API-->
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">

          // Load the Visualization API and the piechart package.
          google.load('visualization', '1.0', {'packages':['corechart']});

          // Set a callback to run when the Google Visualization API is loaded.
          google.setOnLoadCallback(drawChart);

          // Callback that creates and populates a data table,
          // instantiates the pie chart, passes in the data and
          // draws it.
          function drawChart() {

            // Create the data table.
            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]
            ]);
            // Create the data table.
            var data2 = new google.visualization.DataTable();
            data2.addColumn('string', 'Topping');
            data2.addColumn('number', 'Slices');
            data2.addRows([
              ['Mushrooms', 3],
              ['Onions', 1],
              ['Olives', 15],
              ['Zucchini', 1],
              ['Pepperoni', 2]
            ]);

            var data3 = new google.visualization.DataTable();
            data3.addColumn('string', 'Year');
            data3.addColumn('number', 'Sales');
            data3.addColumn('number', 'Expenses');
            data3.addRows([
              ['2004', 1000, 400],
              ['2005', 1170, 460],
              ['2006',  860, 580],
              ['2007', 1030, 540]
            ]);

            // Set chart options
            var options = {'title':'How Much Pizza I Ate Last Night',
                           'width':400,
                           'height':300};
            // Set chart options
            var options2 = {'title':'How Much Pizza You Ate Last Night',
                           'width':400,
                           'height':300};
            // Set chart options
            var options3 = {'title':'Line chart',
                           'width':400,
                           'height':300};

            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
            chart.draw(data, options);
            var chart2 = new google.visualization.PieChart(document.getElementById('chart_div2'));
            chart2.draw(data2, options2);
            var chart3 = new google.visualization.LineChart(document.getElementById('chart_div3'));
            chart3.draw(data3, options3);

          }
        </script>
      </head>

      <body>
        <!--Divs that will hold the charts-->
        <div id="chart_div"></div>
        <div id="chart_div2"></div>
        <div id="chart_div3"></div>
      </body>
    </html>

Ответ 2

В принципе, вы можете обернуть функцию drawChart для параметров, которые нужно передать следующим образом:

function drawChart(chartType, containerID, dataArray, options)

и

call google.setOnLoadCallback(function() {
    drawChart('barChart', 'div_id_1', test_array, null);
});

столько раз, сколько вы хотите отображать графики:

var test_array = [
    ['Name', 'Count-A', 'Count-B'],
    ['Test-A', 4, 3],
    ['Test-B', 1, 2],
    ['Test-C', 3, 4],
    ['Test-D', 2, 0],
    ['Test-E', 2, 5]
];

google.load("visualization", "1", {packages: ["corechart",'table']});

google.setOnLoadCallback(function() {
    drawChart('barChart', 'div_id_1', test_array, null);
});

google.setOnLoadCallback(function() {
    drawChart('columnChart', 'div_id_2', test_array, null);
});


function drawChart(chartType, containerID, dataArray, options) {
    var data = google.visualization.arrayToDataTable(dataArray);
    var containerDiv = document.getElementById(containerID);
    var chart = false;

    if (chartType.toUpperCase() == 'BARCHART') {
        chart = new google.visualization.BarChart(containerDiv);
    }
    else if (chartType.toUpperCase() == 'COLUMNCHART') {
        chart = new google.visualization.ColumnChart(containerDiv);
    }
    else if (chartType.toUpperCase() == 'PIECHART') {
        chart = new google.visualization.PieChart(containerDiv);
    }
    else if (chartType.toUpperCase() == 'TABLECHART')
    {
        chart = new google.visualization.Table(containerDiv);
    }

    if (chart == false) {
        return false;
    }

    chart.draw(data, options);
}

Ответ 3

На основе ответа @Dominor, но если вы регистрируете свои диаграммы произвольными, просто создайте стек функций, который выполняется в функции обратного вызова, например:

google.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
googleChartStack = [];

function drawChart() {
    for (var i = googleChartStack.length - 1; i >= 0; i--) {
        googleChartStack[i]();
    }
}

Затем, где-то еще в вашем шаблоне, вы можете нажать на этот стек. В моем примере я повторял фрагмент шаблона.

<script>
  googleChartStack.push(function() {
    var data = google.visualization.arrayToDataTable([
      ['A', 'B'],
      ['A', 1],
      ['B', 2]
    ]);

    var options = {
      title: 'none',
      legend: 'none'
    };

    var chart = new google.visualization.PieChart(document.getElementById("relevant-id"));
    chart.draw(data, options);          
  })
</script>

Ответ 4

Производственная версия Google Charts имеет временную ошибку, которая предотвращает загрузку более одной диаграммы на одной странице.

Google исправил это в недавней версии, доступной с загрузчиком замороженной версии: https://developers.google.com/chart/interactive/docs/library_loading_enhancements#frozen-versions

Соответствующая тема: https://groups.google.com/forum/?utm_medium=email&utm_source=footer#!msg/google-visualization-api/KulpuT418cg/yZieM8buCQAJ

Ответ 5

возможно, когда вы укажете

google.setOnLoadCallback(drawChart);

дважды он перезаписывает событие обратного вызова в первый раз?

Просто догадаться...

Ответ 6

Что вы хотите сделать, так это функция для каждой диаграммы. Тогда do

google.setOnLoadCallback(initialize);

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

Ответ 7

в вышеприведенном пакете ответов для добавления только пирога. Для печати пирога и линейной диаграммы на той же странице мы также должны включить линейный пакет: google.load('visualization', '1.0', {'packages': ['corechart', 'line']});

полный код: -

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart','line']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        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]
        ]);
        // Create the data table.
        var data2 = new google.visualization.DataTable();
        data2.addColumn('string', 'Topping');
        data2.addColumn('number', 'Slices');
        data2.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 15],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        var data3 = new google.visualization.DataTable();
        data3.addColumn('string', 'Year');
        data3.addColumn('number', 'Sales');
        data3.addColumn('number', 'Expenses');
        data3.addRows([
          ['2004', 1000, 400],
          ['2005', 1170, 460],
          ['2006',  860, 580],
          ['2007', 1030, 540]
        ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};
        // Set chart options
        var options2 = {'title':'How Much Pizza You Ate Last Night',
                       'width':400,
                       'height':300};
        // Set chart options
        var options3 = {'title':'Line chart',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
        var chart2 = new google.visualization.PieChart(document.getElementById('chart_div2'));
        chart2.draw(data2, options2);
        var chart3 = new google.visualization.LineChart(document.getElementById('chart_div3'));
        chart3.draw(data3, options3);

      }
    </script>
  </head>

  <body>
    <!--Divs that will hold the charts-->
    <div id="chart_div"></div>
    <div id="chart_div2"></div>
    <div id="chart_div3"></div>
  </body>
</html>

Ответ 8

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1.1", {packages:["bar"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Day/Month', 'Sales', 'Goal'],
      ['Daily', 33549.17,47328.04],
      ['M-T-D', 96114.18,141984.12]
    ]);


    var data1 = google.visualization.arrayToDataTable([
      ['Day/Month', 'Bookings', 'Goal'],

      ['Daily', 37991.21,47659.09],

      ['M-T-D', 95610.47,142977.27]

    ]);
   var options = {
  colors: ['#e0aa0e', '#ecbb6e','green'],
      width: 800,
      chart: {
        title: 'Test Company Sales',
        subtitle: 'Sales vs Goal',
      }
    };
    var options1 = {
  colors: ['#e0440e', '#ec8f6e','green'],
      width: 800,
      chart: {
        title: 'Test Company Bookings',
        subtitle: 'Bookings',
      }
    };

    var chart = new google.charts.Bar(document.getElementById('sales'));
    chart.draw(data, options);
    var chart2 = new google.charts.Bar(document.getElementById('bookings'));

    chart2.draw(data1, options1);
  }
</script>





  <div style="display: table; width: 100%;">
      <div style="display: table-row">
           <div id="sales" style="width: 900px; height: 500px; display: table-cell;"></div>
          <div id="bookings" style="width: 900px; height: 500px; display: table-cell;"></div>
     </div>
</div>

Ответ 9

step_1. (измените идентификатор curve_chart на другое имя (eg.ajay))

<body>
<div id="ajay" style="width: 900px; height: 500px"></div>

step_2 (присвойте этот идентификатор вашей диаграмме в элементе script).

    var chart = new google.visualization.LineChart(document.getElementById('ajay'));

    chart.draw(data, options);
  }
</script>