Wordpress中的谷歌图表
Google Charts in Wordpress
我想在Wordpress页面中显示谷歌图形。
我在这里了解到Wordpress似乎可以使用Javascript。
所以我创建了一个包含基本代码的页面(这是GCharts的例子)。我的页面看起来像:
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<div id="chart_div"></div>
不幸的是,我的网站上没有显示任何内容。
有人知道发生了什么事吗?
感谢
编辑:
我发现<[CDATA[由Wordpress添加的标签。在我的代码中,这个标签可能被一个"]"字符打断,这会导致问题。
这是萤火虫信息:
syntax error
google.setOnLoadCallback(drawChart);</p>
?page_id=22 (line 88, col 43)
不存在于我的代码中!!
我注意到,当我在页面中点击"更新"时,代码变为:
<script type="text/javascript">// <![CDATA[
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
// ]]></script>
解决方案是。。。不要让页面中的javascript代码中有空行
如果你可以在WP安装中使用未过滤的HTML,你可以尝试这个插件:
http://pp19dd.com/wordpress-plugin-include-custom-field/
顾名思义,它允许您使用快捷代码在帖子中插入自定义字段。您创建了一个新的自定义字段,称之为"图表",并在其中转储所有JavaScript和HTML。
然后,在你的wordpress帖子中,只要在文本中的任何位置键入[包括图表]。这个快捷代码应该可以让你巧妙地将有用但挑剔的所见即所得编辑器和脆弱、易碎的部分分开。
相关文章:
- wordpress谷歌地图调整大小
- 谷歌地图API停止在Wordpress模板中工作
- Wordpress上的谷歌分析活动
- 使用谷歌分析'Wordpress网站的用户ID功能
- 谷歌地图-模式窗口(Wordpress ACF)
- Wordpress中的谷歌地图地理编码不起作用
- 如何将谷歌地图脚本添加到wordpress帖子中
- 在wordpress中将网址添加到谷歌地图的多个标记
- 在谷歌地图信息窗口中获取WordPress帖子内容
- 我的谷歌地图自定义标记不会显示在我的WordPress网站中
- 谷歌地图v3在WordPress加载后移位
- WordPress php 数组到 js 数组以在谷歌地图中使用
- 您在此页面上多次添加了谷歌地图API.这可能会导致意外错误(wordpress)
- Wordpress登录跟踪谷歌分析
- 在wordpress中渲染谷歌地图,基于地址
- Wordpress中的谷歌图表
- 谷歌地图不会显示在Wordpress页面上
- 使用谷歌地图将PHP变量转换为Wordpress中的JS
- 更改wordpress模板中的谷歌标记
- SmoothState和Wordpress.在玩家和谷歌图表的回调时调用什么函数