谷歌直播圖表，一張圖上的多個圖表未繪製

我想在同一頁面上顯示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>

來源

2015-10-17 Bob

我認爲這是與材料圖表的問題，你可以使用「corechart」包或試試這個與延遲：

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); 
}

https://jsfiddle.net/mblenton/ps9j3wwx/1/

來源

2015-10-19 10:25:20

谷歌直播圖表，一張圖上的多個圖表未繪製

回答

相關問題