Wordpress 中的 Google 图表 [英] Google Charts in Wordpress

问题描述

我想在 Wordpress 页面中显示 Google Graph.

I want to display a Google Graph in a Wordpress Page.

我在此处了解到 Wordpress 对 Javascript 似乎没问题.

I've leared here that Wordpress seems ok with Javascript.

所以我创建了一个包含基本代码的页面(这是 GCharts 的示例).我的页面看起来像:

So I've created a Page with a basic code in it (it's the GCharts'example). My page looks like :

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

很遗憾，我的网站上没有显示任何内容.

Unfortunately, nothing is displayed on my site.

有人知道发生了什么吗?

Has someone an idea of what's going on ?

谢谢

我发现 Wordpress 添加了带有 <[CDATA[ 标签的东西.在我的代码中，这个标签可能被]"字符破坏，这会导致问题.

I've found out that there is something with the <[CDATA[ tag added by Wordpress. in my code, this tag may be broken by a "]" character, and that would cause the problem.

这是萤火虫信息:

syntax error


google.setOnLoadCallback(drawChart);</p>

?page_id=22 (line 88, col 43)

我注意到当我在页面中点击更新"时，代码变为:

I noticed that when I hit "update" in my page, the code changes to :

<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 代码中出现空行

And the solution is ... DO NOT LET EMPTY LINES in the javascript code in your Page

这篇关于Wordpress 中的 Google 图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！