经过一番研究,仍然无法解决在同一页面上显示两个图表(带有Google Charts
)的问题。
我无法弄清楚出什么问题或忘记了什么,如果有人可以给我一些提示或指出我所缺少的内容,我将不胜感激。
我可以显示1个图表,但是当我尝试显示另一个图表时,第一个消失。
这是我的代码:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', { 'packages': ['corechart'] });
//google.setOnLoadCallback(drawChartAtleta);
//google.setOnLoadCallback(drawChartSexo);
google.setOnLoadCallback(function () {
drawChartAtleta();
drawChartSexo();
});
//Grafico Atleta por esporte
function drawChartAtleta() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Esporte');
data.addColumn('number', 'Quantidade');
data.addRows([
['Basquete', 30],
['Tenis de Mesa', 17]
]);
var options = {
'title': 'Por Esporte',
'width': 500,
'height': 300
};
var chart = new google.visualization.CollumChart(document.getElementById('char_atleta'));
chart.draw(data, options);
}
//Grafico por Sexo
function drawChartSexo() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Sexo');
data.addColumn('number', 'Quantidade');
data.addRows([
['Masculino', 165],
['Feminino', 67]
]);
var options = {
'title': 'Por Sexo',
'width': 500,
'height': 300
};
var chart = new google.visualization.PieChart(document.getElementById('char_sexo'));
chart.draw(data, options);
}
</script>
<div class="container">
<div class="col-lg-12">
<div class="col-lg-6">
<div class="form-group">
<div id="char_sexo"></div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<div id="char_atleta"></div>
</div>
</div>
</div>
</div>
这是您正在调用的脚本的工作方式:google.visualization.CollumChart
而不是google.visualization.ColumnChart
,请始终在浏览器开发人员控制台中检查javascript错误。(通常为f12)
查看Google图表文档以获取有关柱形图的更多信息
<div class="container">
<div class="col-lg-12">
<div class="col-lg-6">
<div class="form-group">
<div id="char_sexo"></div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<div id="char_atleta"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', { 'packages': ['corechart'] });
//google.setOnLoadCallback(drawChartAtleta);
//google.setOnLoadCallback(drawChartSexo);
google.setOnLoadCallback(function () {
drawChartAtleta();
drawChartSexo();
});
//Grafico Atleta por esporte
function drawChartAtleta() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Esporte');
data.addColumn('number', 'Quantidade');
data.addRows([
['Basquete', 30],
['Tenis de Mesa', 17]
]);
var options = {
'title': 'Por Esporte',
'width': 500,
'height': 300
};
//This line was changed.
var chart = new google.visualization.ColumnChart(document.getElementById('char_atleta'));
chart.draw(data, options);
}
//Grafico por Sexo
function drawChartSexo() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Sexo');
data.addColumn('number', 'Quantidade');
data.addRows([
['Masculino', 165],
['Feminino', 67]
]);
var options = {
'title': 'Por Sexo',
'width': 500,
'height': 300
};
var chart = new google.visualization.PieChart(document.getElementById('char_sexo'));
chart.draw(data, options);
}
</script>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句