如何在一个网页上添加两个Google图表？ [英] How to add two Google charts on the one page?
本文介绍了如何在一个网页上添加两个Google图表？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我做了什么
我已将Google图表添加到我的网页的头部。这会返回图表的图片。
我需要做的事
问题
第二个图表的代码被忽略。我很大程度上怀疑这是由于我不正确地合并每个图表的代码。
代码
第一个图表（行）：
<！ - 加载AJAX API - >
< script type =text / javascriptsrc =https://www.google.com/jsapi>< / script>
< script type =text / javascript>
//加载可视化API和饼图程序包。
google.load（'visualization'，'1.0'，{'packages'：['corechart']}）;
//设置在加载Google Visualization API时要运行的回调。
google.setOnLoadCallback（drawChart）;
//创建和填充数据表的回调，
//实例化饼图，传递数据，
//绘制它。
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] $ b]）;
//设置图表选项
var options = {'width'：960，
'height'：300};
//实例化并绘制我们的图表，传递一些选项。
var chart = new google.visualization.LineChart（document.getElementById（'line_chart'））;
chart.draw（data，options）;
}
< / script>
第二个图表（饼图）：
<！ - 加载AJAX API - >
< script type =text / javascriptsrc =https://www.google.com/jsapi>< / script>
< script type =text / javascript>
//加载可视化API和饼图程序包。
google.load（'visualization'，'1.0'，{'packages'：['corechart']}）;
//设置在加载Google Visualization API时要运行的回调。
google.setOnLoadCallback（drawChart）;
//创建和填充数据表的回调，
//实例化饼图，传递数据，
//绘制它。
function drawChart（）{
//创建数据表。
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]
]）;
//设置图表选项
var options = {'title'：'多少比萨饼我最后一夜'，
'width'：400，
' height'：300};
//实例化并绘制我们的图表，传递一些选项。
var chart = new google.visualization.PieChart（document.getElementById（'chart_div'））;
chart.draw（data，options）;
}
< / script>
每个图表都使用具有唯一ID的容器div在正文中调用：
< div id =chart_div>< / div>
我的问题
这两个代码块在一起？我尝试复制drawChart（）并指定唯一的函数名和变量，但无效。
解决方案
解决方案
我现在有一个工作的解决方案。它涉及识别要复制的示例代码的哪些部分以及不重复的部分（如Oofpez建议的）。每个图表的数据，选项和图表变量都在一个drawChart（）函数中定义。
这里是一个工作示例（只需复制并粘贴到HTML文档）：
...此示例进一步演示如何组合不同的图表类型，如饼图和线...
< html>
< head>
<！ - 加载AJAX API - >
< script type =text / javascriptsrc =https://www.google.com/jsapi>< / script>
< script type =text / javascript>
//加载可视化API和饼图程序包。
google.load（'visualization'，'1.0'，{'packages'：['corechart']}）;
//设置在加载Google Visualization API时要运行的回调。
google.setOnLoadCallback（drawChart）;
//创建和填充数据表的回调，
//实例化饼图，传递数据，
//绘制它。
function drawChart（）{
//创建数据表。
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]
]）;
//创建数据表。
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]
]）;
//设置图表选项
var options = {'title'：'多少比萨饼我最后一夜'，
'width'：400，
' height'：300};
//设置图表选项
var options2 = {'title'：'多少比萨你最后一夜'，
'width'：400，
'height'：300 };
//设置图表选项
var options3 = {'title'：'折线图'，
'width'：400，
'height'：300}
//实例化并绘制我们的图表，传递一些选项。
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>
<！ - 将保存图表的div - >
< div id =chart_div>< / div>
< div id =chart_div2>< / div>
< div id =chart_div3>< / div>
< / body>
< / html>
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:
<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.
解决方案
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). The data, options and chart variables for EACH of your charts are defined within the ONE drawChart() function.
Here is a working example (just copy and paste into a HTML document):
...This example further demonstrates how to combine different chart types i.e. 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>
这篇关于如何在一个网页上添加两个Google图表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
