Wordpress〜如何在頁面上顯示多個Google圖表？

Question

下面是我插入到WordPress Visual Composer中的一個原始HTML塊中的一個Google圖表的代碼 - 圖表ID名稱是'chart_div1' - 這適用於我的WP網頁。

＃

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript"> 
    google.charts.load('current', {'packages':['corechart']}); 
    google.charts.setOnLoadCallback(drawChart); 
    function drawChart() { 
    var data = google.visualization.arrayToDataTable([ ['X','Y'], [8,12], [6.5,7] ]); 
    var options = {  }; 
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div1')); 
    chart.draw(data, options); 
    } 
</script> 

<div id="chart_div1"></div> 

＃

試圖增加與病歷ID 'chart_div2' 第二圖表在同一頁上。第二個圖表在另一個原始HTML塊中，但圖表不顯示，只有chart_div1在上面。

＃

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript"> 
    google.charts.load('current', {'packages':['corechart']}); 
    google.charts.setOnLoadCallback(drawChart); 
    function drawChart() { 
    var data = google.visualization.arrayToDataTable([ ['XX','YY'], [18,112], [16.5,17] ]); 
    var options = {  }; 
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div2')); 
    chart.draw(data, options); 
    } 
</script> 

<div id="chart_div2"></div> 

＃

試過幾個變化並不能得到任何工作。我也嘗試把這個代碼放在簡碼中，並且是同樣的問題。

有什麼建議嗎？

Answer 1

如果你看一下瀏覽器控制檯，然後你會發現一個錯誤信息：

loader.js:146 Uncaught Error: google.charts.load() cannot be called more than once with version 45 or earlier.

那是因爲這個函數的函數調用：

google.charts.load('current', {'packages':['corechart']}); 

而且，由於你已經從gstatic得到的腳本加載，那麼你真的不需要這個不止一次：

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

一個簡單的解決方案將是第一加載這些資源，然後每個後續塊：

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

 

 
<script type="text/javascript"> 
 
    google.charts.setOnLoadCallback(drawChart); 
 
    function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ ['X','Y'], [8,12], [6.5,7] ]); 
 
    var options = {  }; 
 
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div1')); 
 
    chart.draw(data, options); 
 
    } 
 
</script> 
 
<div id="chart_div1"></div> 
 

 

 
<hr/> 
 

 

 
<script type="text/javascript"> 
 
    google.charts.setOnLoadCallback(drawChart2); 
 
    function drawChart2() { 
 
    var data2 = google.visualization.arrayToDataTable([ ['XX','YY'], [18,112], [16.5,17] ]); 
 
    var options2 = {  }; 
 
    var chart2 = new google.visualization.ScatterChart(document.getElementById('chart_div2')); 
 
    chart2.draw(data2, options2); 
 
    } 
 
</script> 
 
<div id="chart_div2"></div>

但是你可能會注意到一個效率/可重用性難題產生了。你真的想在每一頁上加載這些資源，不管它是否有圖表？不是。你想跟蹤在添加HTML塊之前是否已經加載了資源嗎？所以要解決這個問題，你想有條件地包含這些資源，如果它們不存在的話。通過這種方式，每個HTML塊都是獨立的，隨時隨地使用，而不會與其他同行發生衝突。

要做到這一點，一種方法是簡單地檢查google.charts對象是否被定義，如果沒有，那麼寫入腳本需要包含資源的文檔。

如果你沒有使用任何其他谷歌對象，那麼你可以檢查谷歌。

window.google || document.write('<script> ... </script>') 

但這不太可能，因爲谷歌有很多很酷的東西。因此，更具體地說，您需要檢查是否定義了window.google.charts，但您可能會注意到，如果嘗試訪問嵌套的未定義對象，上述方法將拋出TypeError。因此，有a slick workaround

(window.google || {}).charts || document.write('<script> ... </script>') 

所以，當你把它放在一起，逃離了可讀性標籤斜線和換行符，你會得到一個不錯的包含這樣的可重複使用的塊：

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

<script type="text/javascript"> 
    google.charts.setOnLoadCallback(drawChart); 
    function drawChart() { 
    var data = google.visualization.arrayToDataTable([ ['X','Y'], [8,12], [6.5,7] ]); 
    var options = {  }; 
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div1')); 
    chart.draw(data, options); 
    } 
</script> 

<div id="chart_div1"></div> 

可與其他塊愉快地共存在同一頁上。無論如何，第一個塊加載資源，然後每個其他塊跳過並直接渲染數據。

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

 
<script type="text/javascript"> 
 
    google.charts.setOnLoadCallback(drawChart); 
 
    function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ ['X','Y'], [8,12], [6.5,7] ]); 
 
    var options = {  }; 
 
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div1')); 
 
    chart.draw(data, options); 
 
    } 
 
</script> 
 

 
<div id="chart_div1"></div> 
 

 

 

 
<hr/> 
 

 

 

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

 
<script type="text/javascript"> 
 
    google.charts.setOnLoadCallback(drawChart); 
 
    function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ ['XX','YY'], [18,112], [16.5,17] ]); 
 
    var options = {  }; 
 
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div2')); 
 
    chart.draw(data, options); 
 
    } 
 
</script> 
 

 
<div id="chart_div2"></div>

Answer 2

你可以試試這個：

google.charts.load('45', {packages: ['corechart']}); 

寫 「45」，而不是 「現在」，因爲 「當前」 仍然是版 「44」。這對我有效。