堆栈内存溢出
  繁体   English   中英

如何在一个页面上添加两个Google图表？

[英]How to add two Google charts on the one page?

 原文  2012-03-27 11:43:44  1   9    javascript/ charts

问题描述

我做了什么

我已将谷歌图表添加到页面的头部。 这将返回图表的图像。

我需要做什么

我只需要在同一页面上添加第二个图表。

问题

第二个图表的代码被忽略。 我很大程度上怀疑这是由于我错误地将每个图表的代码组合在一起。

代码

第一张图表（行）： 

    <!--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（）并指定唯一的函数名和变量，但无济于事。

9 个解决方案

解决方案1
 67 已采纳  2012-03-27 20:57:06

解

我现在有一个有效的解决方案。 它涉及辨别示例代码的哪些部分要复制以及什么不复制（如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>

解决方案2
 13  2013-08-20 10:48:06

基本上你可以将函数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
 5  2014-07-02 09:36:37

基于@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
 5  2015-11-30 17:49:54

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

解决方案5
 4  2016-04-12 10:07:27

在上面的答案包中只添加了饼图...为了在同一页面上打印饼图和折线图，我们还必须包括行包：google.load（'visualization'，'1.0'，{'packages'：['corechart'， '线']}）;

完整代码： - 

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

解决方案6
 4  2012-03-27 11:51:58

也许当你指定 

google.setOnLoadCallback(drawChart);

两次它第一次覆盖回调事件？

只是一个猜测......

解决方案7
 1  2012-07-03 05:22:55

你想要做的是为每个图表都有一个功能。 然后做 

google.setOnLoadCallback(initialize);

并初始化调用每个函数来创建图表。 与在一个函数中绘制多个图表相比，它更加清晰。 它也有助于调试。

解决方案8
 0  2015-10-05 21:51:05

<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
 0  2015-12-08 06:08:24

step_1。（将id curve_chart更改为其他名称（例如，ajay）） 

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

step_2。（在脚本元素中将此id分配给您的图表）.. 

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

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Google在一页上绘制两个条形图 如何将多个重要的Google图表添加到一页？ 具有超级代理的一页上的两个Google图表 一页上有两个不同的Google图表 两个Google条形图在一页中不起作用 Google Charts API-页面上仅呈现一个图表，其中包含两个图表 如何从两个单独的电子表格数据源在一页上获取两个不同的Google图表 javascript - 如何在同一页面上加载两个谷歌图表，不同的div 如何在仪表板中添加按钮以在两种类型的谷歌图表之间切换 如何使用 Google Charts API 绘制两个材质图表而一个不为空？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM