Google Charts в Wordpress - PullRequest
Новая
       7

Google Charts в Wordpress

1 голос
/ 13 марта 2012

Я хочу отобразить Google Graph на странице 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.в моем коде этот тег может быть разбит символом «]», и это может вызвать проблему. </p>

Вот информация о firebug: 

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>

Ответы [ 2 ]

2 голосов
/ 13 марта 2012

И решение состоит в том ... НЕ ПОЗВОЛЯЙТЕ ПУСТЫХ ЛИНИЙ в коде javascript на вашей странице

1 голос
/ 14 марта 2012

Если у вас все в порядке с нефильтрованным HTML в вашей установке WP, вы можете попробовать этот плагин:

http://pp19dd.com/wordpress-plugin-include-custom-field/

Как следует из названия, он позволяет использовать шорткоды для вставки пользовательскихполя внутри постов.Вы создаете новое настраиваемое поле, называете его «диаграмма», добавляете туда все эти JavaScript и HTML.

Затем в своем посте WordPress просто введите [include chart], где бы вы ни хотели, чтобы оно было в тексте.Этот короткий код должен позволить вам аккуратно отделить полезный, но требовательный редактор WYSIWYG и нежные, ломкие части.

...