如何在一页上添加两个谷歌图表?

IT技术 javascript charts
2021-01-22 07:28:14

我所做的

我已将 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>

第二张图(饼图):

    <!--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>

使用具有唯一 ID 的容器 div 在主体中调用每个图表:

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

我的问题

我如何将这两个代码块拼接在一起?我试过复制 drawChart() 并指定唯一的函数名称和变量,但无济于事。

6个回答

解决方案

我现在有一个可行的解决方案。它涉及辨别示例代码的哪些部分要复制,哪些部分不要复制(如 Oofpez 建议的那样)。每个图表的数据、选项和图表变量都在 ONE drawChart() 函数中定义。

这是一个工作示例(只需复制并粘贴到 HTML 文档中):

...此示例进一步演示了如何组合不同的图表类型,即饼图和折线图...

<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>
2021-03-25 07:28:14
但是,这仅在您知道在任何给定时间将拥有多少图表时才有效。
2021-04-13 07:28:14

基本上,您可以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);
}
一个 JSfiddle 的例子会有很长的路要走。
2021-03-17 07:28:14
这是我选择的路线,但发现它不适用于新的材料折线图。与经典配合得很好。对于材料,每次刷新时显示的图表都不同:)
2021-03-18 07:28:14

基于@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>
这与我最终做的很接近。我来这里是为了发布我的作品,但我会为你的作品点赞,因为它捕捉到了同样的精神。构建一堆谷歌图表,然后一次加载它们。
2021-04-12 07:28:14

Google Charts 的生产版本有一个计时错误,会阻止在同一页面上加载多个图表。

谷歌在最近的一个版本中修复了这个问题,可用于冻结版本加载器: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

我知道这是一个谷歌错误。这节省了我几个小时。
2021-04-06 07:28:14

也许当你指定

google.setOnLoadCallback(drawChart);

第一次覆盖回调事件两次?

只是猜测...

谢谢。它是。我想出了如何避免不得不使用该功能两次。有关解决方案的完整说明,请参阅我的原始帖子。
2021-04-10 07:28:14