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”。这对我有效。