Wordpress中的谷歌图表

Google Charts in Wordpress

本文关键字:谷歌 Wordpress      更新时间:2023-09-26

我想在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帖子中,只要在文本中的任何位置键入[包括图表]。这个快捷代码应该可以让你巧妙地将有用但挑剔的所见即所得编辑器和脆弱、易碎的部分分开。