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

下面是我在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>

#

load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable（[[X'，'Y'，[8,12]，[6.5,7]]）；
var选项={}；
var chart=new google.visualization.ScatterChart（document.getElementById（'chart_div1'））；
图表绘制（数据、选项）；
}

# 正在尝试在同一页上添加第二个图表id为“chart\u div2”的图表。另一个原始HTML块中的第二个图表，但该图表不显示，只有上面的图表_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>

#

load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable（[[XX'，[YY']，[18112]，[16.5,17]]）；
var选项={}；
var chart=new google.visualization.ScatterChart（document.getElementById（'chart_div2'））；
图表绘制（数据、选项）；
}

# 已经尝试了几种变体，但都无法使用。我也尝试过将这段代码放在短代码中，同样的问题

---

有什么建议吗？

如果查看浏览器控制台，您会注意到一条错误消息：

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>

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

load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable（[[X'，'Y'，[8,12]，[6.5,7]]）；
var选项={}；
var chart=new google.visualization.ScatterChart（document.getElementById（'chart_div1'））；
图表绘制（数据、选项）；
}

google.charts.setOnLoadCallback（drawChart2）；
函数drawChart2（）{
var data2=google.visualization.arrayToDataTable（[[[XX'，[YY']，[18112]，[16.5,17]]）；
var options2={}；
var chart2=新的google.visualization.ScatterChart（document.getElementById（'chart_div2'）；
图表2.绘图（数据2，选项2）；
}

您可以尝试以下方法：

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

写“45”而不是“当前”，因为“当前”仍然是版本“44”。这对我有用