javascript - Wordpress ~ 如何在一个页面上显示多个 Google Chart？

Question

这是我在 WordPress Visual Composer 中插入到原始 HTML block 中的一个 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 block 中的第二个图表，但图表未显示，只有上面的 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>

一个简单的解决方案是先加载这些资源，然后再加载每个后续 block :

<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 block 之前跟踪是否已经加载了资源吗？没有。

因此，要解决此问题，您需要有条件地包含那些尚不存在的资源。这样每个 HTML block 都是独立的，可以在任何地方使用而不会与其同行发生冲突。

要实现这一点，一种方法是简单地检查是否定义了 google.charts 对象，只有在没有定义的情况下，才将包含该资源所需的脚本写入文档。

如果您没有使用任何其他 google 对象，那么您可以直接检查 google。

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

但这不太可能，因为谷歌有很多很酷的东西。因此，更具体地说，您需要检查是否定义了 window.google.charts，但您可能会注意到，如果您尝试上述方法，将会抛出一个 TypeError访问嵌套的 undefined object 。所以有 a slick workaround

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

所以当你把它们放在一起，转义标记斜杠和换行符以提高可读性时，你会得到一个很好的包含的可重用 block ，如下所示:

<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>

它可以愉快地与同一页面上的其他 block 共存。在任何情况下，第一个 block 都会加载资源，然后其他 block 会跳过它并直接渲染您的数据。

<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>