Как я могу встроить интерактивный граф HighCharts в страницу wordpress 3.5.1?

Question

Меня зовут Джош, и я работаю в общинной колледже. Я недавно нашел Highcharts и пытался внедрить интерактивный график в сообщение для нашего сайта, но безуспешно. Фактически, это был полный провал.

Я уже перечитал и попытался это сообщение не дали никаких результатов: highcharts and wordpress

Там не один я знаю, кто я могу взять эту проблему и даже если я чувствую, что я перепробовал все предложенное решение, к сожалению , Я довольно неграмотен, когда дело доходит до html и кода. Любая помощь была бы высоко оценена.

Я работаю с Wordpress 3.5.1 Вот мой вопрос: Я запускаю: Разрешаю PHP в сообщениях и плагинах страниц & Интерактивный Javascript и CSS.

Для варианта заголовка поста у меня есть:

<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"> </script> 
<script src="http://www.domain.com/wp-content/uploads/2013/03/highcharts1.js" type="text/javascript"></script> 

В некоторых веб-сайтов (это один входит в комплект), я видел упоминание о загрузке библиотеки Highcharts на ваш WordPress сервер. Я загрузил файл highcharts.js через медиа-библиотеку, но у меня такое ощущение, что я делаю это неправильно?

В самом посте я разместил:

[php] 
$(function() { 
var chart; 
$(document).ready(function() { 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'line', 
      marginRight: 130, 
      marginBottom: 25 
     }, 
     title: { 
      text: 'State Funding of DSPS Services', 
      x: -20 //center 
     }, 
     subtitle: { 
      text: 'Source:MPR Associates Report', 
      x: -20 
     }, 
     xAxis: { 
      categories: ['2003-04', '2004-05', '2005-06', '2006-07', '2007-08', 
       '2008-09', '2009-10', '2010-11', '2011-2012', '2012-13'] 
     }, 
     yAxis: { 
      title: { 
       text: '$ Million' 
      }, 
      plotLines: [{ 
       value: 0, 
       width: 1, 
       color: '#808080' 
      }] 
     }, 
     tooltip: { 
      formatter: function() { 
        return '<b>'+ this.series.name +'</b><br/>'+ 
        this.x +': '+ this.y +' Million'; 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'top', 
      x: -10, 
      y: 100, 
      borderWidth: 0 
     }, 
     series: [{ 
      name: 'College Total Funding', 
      data: [77.8, 81.8, 86.2, 102.1, 109.3, 108.9, 64.9, 64.8, 64.6, 65.7] 

     }] 
    }); 
}); 

}); 
[/php] 
<div id="container" style="width: 100%; height: 400px"></div> 

---

страница приходит пустой, как это было в течение последних ста попыток или около того. Приносим извинения, если это сообщение в неправильном месте или нежелательно. Любые советы или решения приветствуются.

Спасибо, J

Answer 1

Для того, чтобы получить график визуализации, вам нужно несколько вещей, чтобы быть на месте:

1. Включите highcharts.js - сделали
2. Включите некоторые JavaScript, который определяет и создает график - сделано
3. Дайте высокие диаграммы место для размещения графика -?

Я думаю, что вам может не хватать последний элемент. Это делается путем включения тега внутри вашего сообщения где-нибудь. ДИВ можно назвать, используя свойство «ID» следующим образом:

<div id='container'>mydiv</div> 

Вы уже сказали Highcharts, что вы хотите «renderTo» место под названием «контейнер», так что это должно быть все, что вам нужно.

Чтобы добавить это в Wordpress, зайдите в редактор сообщений и убедитесь, что вы находитесь в режиме «html». В моей версии wordpress это вкладка только в верхнем правом углу панели редактирования сообщений с опциями «visual» и «html».

В режиме html просто добавьте мой код div в том месте, где вы хотите, чтобы график отображался. Надеюсь, это поможет.

Answer 2

может быть несколько причин, по которым диаграмма не отображается.

1) Скрипты (jquery и highcharts) должны быть загружены на вашу страницу, и это не сразу видно в wordpress. Есть несколько способов - если вы не кодер, то проще всего перейти к header.php вашей темы. (Внешний вид-> Редактор) и найдите файл header.php с правой стороны. В головной части вам необходимо зарегистрировать библиотеку Highcharts ...

wp_register_script('myHighchartsHandle','highcharts/js/highstock.js',array('jquery'),'1.0a'); 
    wp_enqueue_script('myHighchartsHandle'); 

Путь к высокой библиотеке/запасов Highcharts будет меняться в зависимости от того, где он находится на сервере, конечно.

2) Код javascript - ваш код предоставлен в виде php-тегов. Я думаю, вы могли бы отредактировать это, чтобы иметь js-теги в квадратных скобках и установить плагин «Разрешить javascript в сообщениях и страницах». Обратите внимание, что для плагинов вам необходимо префикс любых квадратных скобок в коде с обратным слэшем, поэтому вам нужно будет сделать это, чтобы получить формат данных правильно.

3) Это похоже на то, что у вас есть контейнер div вне вашего кода, который хорош. Но, как и другой ответ, вам понадобится это, и идентификатор должен соответствовать renderTo в коде.

4) Если это не сработает после этих 3 шагов, то вы можете падать в jQuery noConflict.Wordpress задает jquery в этом режиме по умолчанию. Вместо $ в вашем js-коде вам может потребоваться заменить jQuery. Библиотека высоких диаграмм в коде, который вы использовали.

Поздравляем за помощь в случае необходимости. С тех пор я создал большую часть этого плагина, который намного чище ...