这是我在 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>
#
尝试了多种变体,但无法正常工作。我也试过把这段代码放在短代码中,同样的问题。
有什么建议吗?
最佳答案
如果您查看浏览器控制台,您会注意到一条错误消息:
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>
关于javascript - Wordpress ~ 如何在一个页面上显示多个 Google Chart?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37820598/