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未捕获错误：使用版本45或更早版本不能多次调用google.charts.load（）。

这是因为这个函数函数调用：

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

此外，既然您已经从gstatic加载了脚本，那么您真的不需要这样做多次：

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

一个简单的解决方案是首先加载这些资源，然后加载每个后续块：

＆＃13;

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

＆＃13;

但您可能会注意到效率/可重用性难题的产生。你是否真的想在每个页面加载这些资源，无论它是否有图表？不。在添加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>

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

＆＃13;

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

＆＃13;

Answer 2

你可以试试这个：

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

写＆＃34; 45＆＃34;而不是＆＃34;当前＆＃34;，因为＆＃34;当前＆＃34;仍然版本＆＃34; 44＆＃34;。这对我有用。

Wordpress~如何在一个页面上显示多个Google图表？

2 个答案: