堆栈内存溢出
  简体   繁体   English

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

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

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

问题描述

What I've done 我做了什么

I've added Google chart to the head of my page. 我已将谷歌图表添加到页面的头部。 This returns an image of a chart. 这将返回图表的图像。

What I need to do 我需要做什么

I simply need to add a second chart to the same page. 我只需要在同一页面上添加第二个图表。

The problem 问题

The code for the second chart is ignored. 第二个图表的代码被忽略。 I largely suspect this is due to me incorrectly combining the code for each chart. 我很大程度上怀疑这是由于我错误地将每个图表的代码组合在一起。

The code 代码

First chart (line): 第一张图表（行）： 

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

Second chart (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>

Each of the charts are called in the body using a container div with a unique id: 使用具有唯一ID的容器div在正文中调用每个图表： 

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

My question 我的问题

How do I stitch these two blocks of code together? 如何将这两个代码块拼接在一起？ I've tried copying drawChart() and specifying unique function names and variables but to no avail. 我试过复制drawChart（）并指定唯一的函数名和变量，但无济于事。

9 个解决方案

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

Solution 解

I now have a working solution. 我现在有一个有效的解决方案。 It involved discerning which parts of the example code to duplicate and what not to duplicate (as suggested by Oofpez). 它涉及辨别示例代码的哪些部分要复制以及什么不复制（如Oofpez所建议的）。 The data, options and chart variables for EACH of your charts are defined within the ONE drawChart() function. 每个图表的数据，选项和图表变量都在ONE drawChart（）函数中定义。

Here is a working example (just copy and paste into a HTML document): 这是一个工作示例（只需复制并粘贴到HTML文档中）：

...This example further demonstrates how to combine different chart types ie pie and 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
 13  2013-08-20 10:48:06

Basically you can wrap function drawChart for parameters to pass on like: 基本上你可以将函数drawChart包装为参数传递，如： 

function drawChart(chartType, containerID, dataArray, options)

and 和 

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

as many times as much you want to render graphs: 想要渲染图形的次数是多少： 

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

Based on @Dominor's answer, but if you are registering your charts from arbitrary, just build a function stack that gets executed in the callback function like so: 基于@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]();
    }
}

Then, somewhere else in your template, you can push to this stack. 然后，在模板中的其他位置，您可以推送到此堆栈。 In my example, I was iterating through some template snippet. 在我的例子中，我正在迭代一些模板片段。 

<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

Production version of Google Charts has a timing bug that prevents more than one chart from loading on the same page. Google Charts的生产版本有一个时间错误，可防止在同一页面上加载多个图表。

Google fixed this in a recent release, available with the frozen version loader: https://developers.google.com/chart/interactive/docs/library_loading_enhancements#frozen-versions 谷歌在最新版本中对此进行了修复，该版本与冻结版本加载器一起提供： https ： //developers.google.com/chart/interactive/docs/library_loading_enhancements#frozen-versions

Relevant thread: https://groups.google.com/forum/?utm_medium=email&utm_source=footer#!msg/google-visualization-api/KulpuT418cg/yZieM8buCQAJ 相关主题： 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

in above answer package for only pie is added..for printing pie and line chart on the same page we must include line package also: google.load('visualization', '1.0', {'packages':['corechart','line']}); 在上面的答案包中只添加了饼图...为了在同一页面上打印饼图和折线图，我们还必须包括行包：google.load（'visualization'，'1.0'，{'packages'：['corechart'， '线']}）;

full code:- 完整代码： - 

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

maybe when you specify 也许当你指定 

google.setOnLoadCallback(drawChart);

twice it overwrites the callback event for the first time? 两次它第一次覆盖回调事件？

Just a guess... 只是一个猜测......

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

What you want to do is have a function for each chart. 你想要做的是为每个图表都有一个功能。 Then do 然后做 

google.setOnLoadCallback(initialize);

and have initialize call each function to create the chart. 并初始化调用每个函数来创建图表。 It is a lot cleaner that way than drawing multiple charts in one function. 与在一个函数中绘制多个图表相比，它更加清晰。 It also will help debugging as well. 它也有助于调试。

解决方案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.(change id curve_chart to some another name(eg.ajay)) step_1。（将id curve_chart更改为其他名称（例如，ajay）） 

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

step_2.(assign this id to your chart in script element).. 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 charts two bar charts on one page 如何将多个重要的Google图表添加到一页？ - How to add multiple material google charts to one page? 具有超级代理的一页上的两个Google图表 - two google charts on one page with super proxy 一页上有两个不同的Google图表 - Two different google charts on one page 两个Google条形图在一页中不起作用 - Two google bar charts not working in one page Google Charts API-页面上仅呈现一个图表，其中包含两个图表 - Google Charts API - Only one chart rendered on page with two charts 如何从两个单独的电子表格数据源在一页上获取两个不同的Google图表 - How to get two different google charts on one page from two separate spreadsheet data sources javascript - 如何在同一页面上加载两个谷歌图表，不同的div - javascript - How to load two google charts on the same page, different divs 如何在仪表板中添加按钮以在两种类型的谷歌图表之间切换 - how to add buttons to switch between two types of google charts in a dashboard 如何使用 Google Charts API 绘制两个材质图表而一个不为空？ - How can I draw two material charts with the Google Charts API without one being empty?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM