谷歌圖表API - 只有一個圖表在兩頁圖上呈現

我試圖在頁面中包括2個圖表。一個是折線圖，另一個是散點圖。我遵循Google Charts API的指南，在單個頁面上使用單個回調函數實現多個圖表，但是在任何時候只有一個圖表會出現。真奇怪的是，它是Safari上出現的左側折線圖和Chrome上出現的右側散佈圖。谷歌圖表API - 只有一個圖表在兩頁圖上呈現

在頭部的圖表創建代碼如下。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 

<script> 
    google.charts.load('current', {'packages':['corechart']}); 
    google.charts.setOnLoadCallback(drawChart); 

    function drawChart() { 
    var dataLine = google.visualization.arrayToDataTable([ 
     ['Hour', 'Example', 'Example1', 'Example2', 'Example3', 'Example4', 'Example5'], 
     ['15:00', 728, 1065, 112, 73 , 12, 134], 
     ['16:00', 943, 1056, 122, 112 , 9, 116], 
     ['17:00', 1280, 1069, 156, 99 , 26, 196], 
     ['18:00', 1276, 1277, 154, 134 , 9, 204], 
     ['19:00', 1235, 984, 84, 109 , 10, 134], 
     ['20:00', 1133, 1028, 83, 74 , 20, 73], 
     ['21:00', 938, 1018, 191, 49 , 33, 66], 
     ['22:00', 1038, 952, 163, 72 , 27, 79], 
     ['23:00', 851, 807, 156, 57 , 11, 79], 
     ['00:00', 390, 455, 89, 24 , 9, 41], 
     ['01:00', 195, 270, 13, 13 , 5, 13], 
     ['02:00', 92, 140, 18, 2 , 0, 7], 
     ['03:00', 86, 73, 7, 2 , 1, 2], 
     ['04:00', 136, 49, 8, 3 , 1, 8], 
     ['05:00', 99, 86, 10, 3 , 0, 5], 
     ['06:00', 230, 200, 15, 8 , 5, 12], 
     ['07:00', 531, 461, 49, 39 , 4, 40], 
     ['08:00', 605, 683, 152, 67 , 13, 96], 
     ['09:00', 528, 800, 111, 78 , 17, 53], 
     ['10:00', 716, 885, 75, 68 , 14, 76], 
     ['11:00', 1102, 768, 66, 50 , 15, 46], 
     ['12:00', 1015, 695, 41, 47 , 18, 49], 
     ['13:00', 856, 624, 52, 95 , 18, 73], 
     ['14:00', 779, 524, 32, 30 , 21, 70] 
    ]); 

    var optionsLine = { 
     title: '', 
     curveType: 'function', 
     legend: { position: 'bottom' }, 
     colors: ['#00539f', '#e4003b','#faa01a','#ffeb3b','#19283e','#00539f'], 
     theme: 'material', 
     vAxis: { 
     viewWindow: { 
     min: 0 
     } 
    }, 
    }; 

    var dataScatter = google.visualization.arrayToDataTable([ 
     ['Hour', 'Example', 'Example1', 'Example2', 'Example3', 'Example4', 'Example5'], 
     ['15:00', 0.158333, 0.186111, 0.191667, 0.0708333 , 0.1625, 0.202827], 
     ['16:00', 0.0194444, 0.155417, 0.199306, 0.183333 , 0.5, 0.15], 
     ['17:00', 0.147917, 0.161146, 0.227083, 0.154861 , 0.120833, 0.178393], 
     ['18:00', -0.003125, 0.151515, 0.123214, 0.234524 , 0.388333, 0.228571], 
     ['19:00', 0.125, 0.179762, 0.116667, 0.207292 , -0.075, 0.207143], 
     ['20:00', 0.125, 0.183333, 0.171591, 0.179167 , 0.45, 0.114881], 
     ['21:00', 0.110795, 0.2, 0.200379, 0.15625 , 0.18925, 0.198611], 
     ['22:00', 0.105787, 0.175, 0.233333, 0.179167 , 0.0171131, 0.1625], 
     ['23:00', 0.0146465, 0.183333, 0.159091, 0 , 0.0680556, 0.202313], 
     ['00:00', 0.0675, 0.176736, 0.113021, 0.166667 , 0.350758, 0.187946], 
     ['01:00', 0.0162698, 0.158333, 0.251711, -0.227778 , -0.3625, 0.0964286], 
     ['02:00', 0.145, 0.215625, 0.24375, -0.0729167 , 0, 0.447619], 
     ['03:00', 0.145509, 0.22128, 0.159091, 0 , -0.2, 0], 
     ['04:00', 0.104167, 0.158333, 0.16875, 0.35 , 0, 0.111111], 
     ['05:00', 0.0127946, 0.05, -0.426042, 0.325 , 0, 0.0638889], 
     ['06:00', 0.146875, 0.0708333, -0.221429, 0.05 , 0, 0.273214], 
     ['07:00', 0.1125, 0.184722, -0.0253472, 0.258333 , -0.35, 0.161354], 
     ['08:00', 0.133333, 0.190972, 0.141667, 0.244048 , 0.358929, 0.186458], 
     ['09:00', 0.128355, 0.188988, 0.13, 0.181061 , 0.0425, 0.257552], 
     ['10:00', 0.1, 0.196875, 0.147112, -0.0464286 , -0.161458, 0.26875], 
     ['11:00', 0.136364, 0.174826, 0.285714, 0.290476 , 0.31875, 0.275], 
     ['12:00', -0.00357143, 0.172222, 0.199657, 0.1625 , 0.215, 0.159375], 
     ['13:00', -0.1, 0.2, 0.195312, 0.0791667 , -0.246296, 0.183333], 
     ['14:00', -0.00357143, 0.180303, 0.11125, 0.35 , 0.0081229, 0.19881] 
    ]); 

    var optionsScatter = { 
     title: '', 
     vAxis: { minValue: -1.0, maxValue: 1.0}, 
     colors: ['#00539f', '#e4003b','#faa01a','#ffeb3b','#19283e','#00539f'], 
     theme: 'material', 
     legend: {position: 'bottom'} 
    }; 


var chartLine = new google.visualization.LineChart(document.getElementById('chart_1')); 

chartLine.draw(dataLine, optionsLine); 

var chartScatter = new google.visualization.ScatterChart(document.getElementById('chart_2')); 

chartScatter.draw(dataScatter, optionsScatter); 
} 
</script>

來源

2017-06-16 jskrwyk

你在控制檯中的任何錯誤。如果添加第三個圖表（其他兩個之一的副本），會發生什麼？ – Halcyon

@Halcyon控制檯中沒有錯誤。如果我爲這個問題添加第三和第四個，它仍然只顯示1.儘管奇怪，但如果我現在添加第三個，chrome也只顯示折線圖。 – jskrwyk

我做了一個JSFiddle。它適用於我很好：https：//jsfiddle.net/asoe1o1x/ screencap：http://imgur.com/a/V8SkJ – Halcyon

它將出現在chart.draw功能只能叫一次一個，但因爲它是異步的它立即返回，並試圖撥打第二個立竿見影。答案是使用google.visualization.events.addOneTimeListener()來調用第二張圖表。

完成的代碼：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script> 
    google.charts.load('current', {packages:["corechart","scatter"]}); 
    google.charts.setOnLoadCallback(drawChart); 

    function drawChart() { 
    var dataLine = google.visualization.arrayToDataTable([ 
     ['Hour', 'Example', 'Example1', 'Example2', 'Example3', 'Example4', 'Example5'], 
     ['21:00', 938, 1018, 191, 49 , 33, 66], 
     ['22:00', 1038, 952, 163, 72 , 27, 79], 
     ['23:00', 851, 807, 156, 57 , 11, 79], 
     ['00:00', 390, 455, 89, 24 , 9, 41], 
     ['01:00', 195, 270, 13, 13 , 5, 13], 
     ['02:00', 92, 140, 18, 2 , 0, 7], 
     ['03:00', 86, 73, 7, 2 , 1, 2], 
     ['04:00', 136, 49, 8, 3 , 1, 8], 
     ['05:00', 99, 86, 10, 3 , 0, 5], 
     ['06:00', 230, 200, 15, 8 , 5, 12], 
     ['07:00', 531, 461, 49, 39 , 4, 40], 
     ['08:00', 605, 683, 152, 67 , 13, 96], 
     ['09:00', 528, 800, 111, 78 , 17, 53], 
     ['10:00', 716, 885, 75, 68 , 14, 76], 
     ['11:00', 1102, 768, 66, 50 , 15, 46], 
     ['12:00', 1015, 695, 41, 47 , 18, 49], 
     ['13:00', 856, 624, 52, 95 , 18, 73], 
     ['14:00', 779, 524, 32, 30 , 21, 70], 
     ['15:00', 587, 533, 30, 161 , 19, 46], 
     ['16:00', 580, 566, 59, 78 , 13, 56], 
     ['17:00', 1041, 658, 23, 67 , 13, 39], 
     ['18:00', 1835, 807, 22, 72 , 7, 65], 
     ['19:00', 1603, 630, 35, 116 , 9, 126], 
     ['20:00', 1898, 614, 26, 135 , 11, 110] 
    ]); 

    var optionsLine = { 
     title: '', 
     curveType: 'function', 
     legend: { position: 'bottom' }, 
     colors: ['#00539f', '#e4003b','#faa01a','#ffeb3b','#19283e','#00539f'], 
     theme: 'material', 
     vAxis: { 
     viewWindow: { 
     min: 0 
     } 
    }, 
    }; 

    var dataScatter = google.visualization.arrayToDataTable([ 
     ['Hour', 'Example', 'Example1', 'Example2', 'Example3', 'Example4', 'Example5'], 
     ['21:00', 0.110795, 0.2, 0.200379, 0.15625 , 0.18925, 0.198611], 
     ['22:00', 0.105787, 0.175, 0.233333, 0.179167 , 0.0171131, 0.1625], 
     ['23:00', 0.0146465, 0.183333, 0.159091, 0 , 0.0680556, 0.202313], 
     ['00:00', 0.0675, 0.176736, 0.113021, 0.166667 , 0.350758, 0.187946], 
     ['01:00', 0.0162698, 0.158333, 0.251711, -0.227778 , -0.3625, 0.0964286], 
     ['02:00', 0.145, 0.215625, 0.24375, -0.0729167 , 0, 0.447619], 
     ['03:00', 0.145509, 0.22128, 0.159091, 0 , -0.2, 0], 
     ['04:00', 0.104167, 0.158333, 0.16875, 0.35 , 0, 0.111111], 
     ['05:00', 0.0127946, 0.05, -0.426042, 0.325 , 0, 0.0638889], 
     ['06:00', 0.146875, 0.0708333, -0.221429, 0.05 , 0, 0.273214], 
     ['07:00', 0.1125, 0.184722, -0.0253472, 0.258333 , -0.35, 0.161354], 
     ['08:00', 0.133333, 0.190972, 0.141667, 0.244048 , 0.358929, 0.186458], 
     ['09:00', 0.128355, 0.188988, 0.13, 0.181061 , 0.0425, 0.257552], 
     ['10:00', 0.1, 0.196875, 0.147112, -0.0464286 , -0.161458, 0.26875], 
     ['11:00', 0.136364, 0.174826, 0.285714, 0.290476 , 0.31875, 0.275], 
     ['12:00', -0.00357143, 0.172222, 0.199657, 0.1625 , 0.215, 0.159375], 
     ['13:00', -0.1, 0.2, 0.195312, 0.0791667 , -0.246296, 0.183333], 
     ['14:00', -0.00357143, 0.180303, 0.11125, 0.35 , 0.0081229, 0.19881], 
     ['15:00', 0.1375, 0.180556, 0.0840909, 0.183333 , -0.01875, 0.0875], 
     ['16:00', 0.131548, 0.19375, -0.25, 0.175 , 0.189286, 0.0375], 
     ['17:00', 0.118182, 0.146429, 0.0878472, 0.325 , 0.199107, 0.205], 
     ['18:00', 0.1, 0.165057, 0.338542, 0.0277778 , -0.1125, 0.275], 
     ['19:00', -0.00793651, 0.0125654, 0.119444, 0.266667 , 0.0309722, 0.3], 
     ['20:00', -0.0166667, 0.196044, 0.239583, 0.373295 , 0.00625, 0.4375] 
    ]); 

    var optionsScatter = { 
     title: '', 
     vAxis: { minValue: -1.0, maxValue: 1.0}, 
     colors: ['#00539f', '#e4003b','#faa01a','#ffeb3b','#19283e','#00539f'], 
     theme: 'material', 
     legend: {position: 'bottom'} 
    }; 


    var chartScatter = new google.visualization.ScatterChart(document.getElementById('chart_2')); 

    google.visualization.events.addOneTimeListener(chartScatter, 'ready', function(){ 
     //render chart2 once chart1 is rendered 
     var chartLine = new google.visualization.LineChart(document.getElementById('chart_1')); 

     chartLine.draw(dataLine, optionsLine); 
    }); 


    chartScatter.draw(dataScatter, optionsScatter); 

} 
</script>

來源

2017-06-16 21:04:40 jskrwyk

圖表繪製函數可以一次調用多個函數。除非您可能共享數據或選項，否則不應該在多個圖形之間產生任何干擾。其他人說他們可以讓你的例子在jsfiddle中工作，所以我不知道你爲什麼需要鏈接它們。也許這是關於你的HTML或頁面上的其他事情。順便說一句，ScatterChart是一個'corechart'，所以你不需要爲它加載'scatter'。 – dlaliberte

@dlaliberte它似乎是一個時間問題。你可以調用多個chart.draw（），但如果第一個沒有在第二個之前完成，它不會喜歡它。服務器相當慢，帶寬限制相當低，所以我認爲這可能導致了問題，因爲當我在一臺速度更快的服務器上運行相同的代碼時，它可以正常工作。 – jskrwyk

谷歌圖表API - 只有一個圖表在兩頁圖上呈現

回答

相關問題