我想在同一页面上显示2个折线图。然而,只有一个是shwon。 任何人都可以看看我做错了什么? 如果我删除行chart24.draw或chart15.draw,则显示其余图表。当两者都显示时,只显示最后一个......
我的代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<link rel="shortcut icon" href="./favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
function drawCharts() {
var data15 = google.visualization.arrayToDataTable([
['Minutes', 'Temperature', 'Wind','Rain'],
[1,18,0,0],
[2,18,2.5,1],
[3,18,0,2],
[4,18,0,0],
[5,18,0,2],
[6,18,0,2],
[7,18,0,2],
[8,18,0,5],
[9,18,0,0],
[10,18,0,5],
[11,18,0,1],
[12,18,0,1],
[13,18,0,4],
[14,18,0,0],
[15,18,5,5]
]);
var options15 = {
chart: {
title: 'Data of the last 15 minutes',
},
backgroundColor: '#000000',
width: 800,
height: 300
};
var data24 = google.visualization.arrayToDataTable([
['Hours', 'Temperature', 'Wind','Rain'],
[1,17,6,116],
[2,17,4,156],
[3,17,0,155],
[4,17,0,108],
[5,17,0,126],
[6,17,53,113],
[7,17,0,92],
[8,17,2,99],
[9,17,2,117],
[10,17,5,115],
[11,17,22,115],
[12,18,2,115],
[13,18,4,127],
[14,18,8,104],
[15,18,74,101],
[16,19,107,79],
[17,20,0,141],
[18,21,27,157],
[19,21,0,153],
[20,21,3,110],
[21,21,5,113],
[22,21,10,155],
[23,21,16,152],
[24,20,9,109]
]);
var options24 = {
chart: {
title: 'Data of the last 24 Hours',
},
backgroundColor: '#000000',
width: 800,
height: 300
};
var chart24 = new google.charts.Line(document.getElementById('linechart24'));
var chart15 = new google.charts.Line(document.getElementById('linechart15'));
chart24.draw(data24, google.charts.Line.convertOptions(options24));
chart15.draw(data15, google.charts.Line.convertOptions(options15));
}
google.setOnLoadCallback(drawCharts);
google.load('visualization', '1', {'packages':['line']});
</script>
</head><body><center>
<div id="linechart15">15</div>
<div id="linechart24">24</div>
</center></body></html>
答案 0 :(得分:0)
我认为这是素材图表的问题,你可以使用&#39; corechart&#39;包裹或 试试这个延迟:
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawCharts);
function drawCharts() {
var data15 = google.visualization.arrayToDataTable([
['Minutes', 'Temperature', 'Wind','Rain'],
[1,18,0,0],
[2,18,2.5,1],
[3,18,0,2],
[4,18,0,0],
[5,18,0,2],
[6,18,0,2],
[7,18,0,2],
[8,18,0,5],
[9,18,0,0],
[10,18,0,5],
[11,18,0,1],
[12,18,0,1],
[13,18,0,4],
[14,18,0,0],
[15,18,5,5]
]);
var options15 = {
chart: {
title: 'Data of the last 15 minutes',
},
backgroundColor: '#000000',
width: 800,
height: 300
};
var data24 = google.visualization.arrayToDataTable([
['Hours', 'Temperature', 'Wind','Rain'],
[1,17,6,116],
[2,17,4,156],
[3,17,0,155],
[4,17,0,108],
[5,17,0,126],
[6,17,53,113],
[7,17,0,92],
[8,17,2,99],
[9,17,2,117],
[10,17,5,115],
[11,17,22,115],
[12,18,2,115],
[13,18,4,127],
[14,18,8,104],
[15,18,74,101],
[16,19,107,79],
[17,20,0,141],
[18,21,27,157],
[19,21,0,153],
[20,21,3,110],
[21,21,5,113],
[22,21,10,155],
[23,21,16,152],
[24,20,9,109]
]);
var options24 = {
chart: {
title: 'Data of the last 24 Hours',
},
backgroundColor: '#000000',
width: 800,
height: 300
};
var chart24 = new google.charts.Line(document.getElementById('linechart24'));
doSetTimeOutDrawChart(chart24, data24, options24, 1);
var chart15 = new google.charts.Line(document.getElementById('linechart15'));
doSetTimeOutDrawChart(chart15, data15, options15, 50);
}
function doSetTimeOutDrawChart(chart, data, options, delay){
setTimeout(function () {
chart.draw(data, google.charts.Line.convertOptions(options));
}, delay);
}