如何在一个页面上添加两个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> 第二张图（派）：
<!--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 id="chart_div"></div>
我的问题
如何将这两个代码块拼接在一起？ 我试图复制drawChart（）并指定唯一的函数名称和variables，但无济于事。
解
我现在有一个工作解决scheme。 它涉及辨别示例代码的哪些部分复制以及哪些不复制（如Oofpez所build议的）。 每个图表的数据，选项和图表variables都在ONE drawChart（）函数中定义。
这是一个工作示例（只需复制并粘贴到HTML文档中）：
…这个例子进一步演示了如何组合不同的图表types，即饼图和线…
<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>
基本上你可以包装函数drawChartparameter passing像：
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); }
基于@ Dominor的回答，但是如果你从任意注册你的图表，只需构build一个在callback函数中执行的函数堆栈，如下所示：
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>
谷歌图表的生产版本有一个时间错误，防止在同一页面上加载多个图表。
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
也许当你指定
google.setOnLoadCallback(drawChart);
两次覆盖callback事件的第一次？
只是一个猜测…
你想要做的是每个图表都有一个函数。 然后呢
google.setOnLoadCallback(initialize);
并初始化调用每个函数来创build图表。 这种方法比在一个函数中绘制多个图表要干净得多。 它也将帮助debugging。
在上面的答案包中仅添加了饼图。为了在同一页上打印饼图和折线图，我们还必须包含行包：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>
<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], ['MT-D', 96114.18,141984.12] ]); var data1 = google.visualization.arrayToDataTable([ ['Day/Month', 'Bookings', 'Goal'], ['Daily', 37991.21,47659.09], ['MT-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>
step_1。（把id curve_chart改成别的名字（例如.ajay））
<body> <div id="ajay" style="width: 900px; height: 500px"></div>
第二步。（在脚本元素中将此ID分配给您的图表）
var chart = new google.visualization.LineChart(document.getElementById('ajay')); chart.draw(data, options); } </script>
