Ala*_*ues 5 html javascript charts
After a dozen research, still could not solve my problem in showing two graphs on the same page (with 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>
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)