我深入了解了here和here提出的类似问题。我尝试了他们的实现。它没有用!
然后,我查看了Google的以下链接:tow charts in one page。遵循相同的程序,但最终仍然只显示一个图表。
以下是我的代码:
<script type = "text/javascript" src = "https://www.google.com/jsapi" ></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!--Load the Ajax API-->
<script type="text/javascript">
google.load("visualization", "1", {packages:["line"]});
google.setOnLoadCallback(drawChart);
google.setOnLoadCallback(drawOutputChart);
function drawChart() {
var data = new google.visualization.DataTable(<?= $jsonAnalogTable ?>);
var options = {
chart: {
title: ' Data ',
is3D: 'true'
},
width: 550,
height: 350,
};
var chart = new google.charts.Line(document.getElementById('analogchart'));
chart.draw(data, options);
}
function drawOutputChart(){
var data2 = new google.visualization.DataTable(<?= $jsonOutputTable ?>);
var options2 = {
chart: {
title: ' Data ',
is3D: 'true'
},
width: 550,
height: 350,
};
var chart2 = new google.charts.Line(document.getElementById('outputChart'));
chart2.draw(data2, options2);
}
</script>
** HTML代码来调用它:**
<table>
<tr>
<td>
<div id="analogchart" >
</div>
</td>
<td>
<div id="outputChart" >
</div>
</td>
</tr>
</table>
我真的不知道出了什么问题,因为它能够一次显示一张图表,但不能同时显示两张图表!
答案 0 :(得分:1)
建议使用loader.js
与旧库jsapi
进行对比
并且不需要两者都用于Line
图表
另外,setOnLoadCallback
每页只应调用一次
可以包含在load
语句中,如下例
尝试这样的事情......
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
callback: function () {
drawChart();
drawOutputChart();
},
packages: ['line']
});
function drawChart() {
var data = new google.visualization.DataTable(<?= $jsonAnalogTable ?>);
var options = {
chart: {
title: ' Data ',
is3D: 'true'
},
width: 550,
height: 350,
};
var chart = new google.charts.Line(document.getElementById('analogchart'));
chart.draw(data, options);
}
function drawOutputChart(){
var data2 = new google.visualization.DataTable(<?= $jsonOutputTable ?>);
var options2 = {
chart: {
title: ' Data ',
is3D: 'true'
},
width: 550,
height: 350,
};
var chart2 = new google.charts.Line(document.getElementById('outputChart'));
chart2.draw(data2, options2);
}
</script>