javascript - 使用 Google Charts API 显示两个图表

标签 javascript charts google-visualization

我正在为一个项目使用 Google Charts API,但在显示多个图表时遇到问题。我根据我发现的内容修改了我的代码,但我仍然无法显示第二个图表。您可以看一下this jsfiddle我正在处理的内容,看到只有第一个图表出现。有人知道为什么会发生这种情况或者我错过了什么吗?

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawVisualizations);
function drawVisualizations() {
    var turbidityData = google.visualization.arrayToDataTable([['Date/Time', 'Turbidity'],['Jun 29, 2016 10:15 AM', 12],['Jun 29, 2016 10:30 AM', 11],['Jun 29, 2016 10:45 AM', 11]]);
    var hgData = google.visualization.arrayToDataTable([['Date/Time', 'HG'],['Jun 29, 2016 10:15 AM', 0.46],['Jun 29, 2016 10:30 AM', 0.46],['Jun 29, 2016 10:45 AM', 0.461]]);
    var turbidityOptions = { 
        title: 'SMC Turbidity (past 24 hours)',
        height: 800,
        width: 1000, 
        vAxis: {title: 'Turbidity'}, 
        hAxis: {title: 'Date/Time'}, 
        seriesType: 'bars', 
        series: {3: {type: 'area'}} };
    var hgOptions = { 
        title: 'HG Turbidity (past 24 hours)',
        height: 800,
        width: 1000, 
        vAxis: {title: 'HG'}, 
        hAxis: {title: 'Date/Time'}, 
        seriesType: 'bars', 
        series: {3: {type: 'area'}} };
    var turbidityChart = new google.visualization.ComboChart(document.getElementById('turbidity_chart_div'));
    var hgChart = new google.visualization.ComboChart(document.getElementById('hg_chart_div'));
    turbidityChart.draw(turbidityData, turbidityOptions);
    hgChart.draw(hgData, hgOptions);
}
</script>  
<div id="turbidity_chart_div"> 
<div id="hg_chart_div"> 

谢谢!

最佳答案

关闭你的div

<div id="turbidity_chart_div"> </div>
<div id="hg_chart_div"> </div>

关于javascript - 使用 Google Charts API 显示两个图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38129437/

相关文章:

javascript - 有没有办法改变谷歌图表中 vaxis 基线的宽度/厚度?

javascript - 具有多个颜色区域的 Google Chart Gauge

javascript - 如何在右键单击时更改全日历事件的颜色

javascript - 为什么这个javascript不正确?

javascript - raphael:如何通过代码而不是通过 "drag"在对象上启动 "mouse down"事件?

javascript - 谷歌折线图将时间转换为数字

javascript - 从 URL 检索 JSON

javascript - 可点击的 Chart.js 图表标题

javascript - 在融合图表中显示 "loading data"

javascript - 省略 Order to create "average"Google Chart API 中的一些行