добавление highchart в wordpress

Question

Я пытаюсь добавить highchart к настраиваемому шаблону страницы.

До сих пор я добавил код заголовка ниже в заголовочном файле и добавил div в шаблон страницы. Проблема в том, что диаграмма не отображается в моем шаблоне страницы.

В чем может быть причина, по которой она не отображается?

В файле заголовка между тегами

<script src="http://code.highcharts.com/highcharts.js"></script> 
    <script src="http://code.highcharts.com/modules/exporting.js"></script> 
    <script type="text/javascript"> 
    $(function() { 
    $('#chart-container').highcharts({ 
     title: { 
      text: '', 
      x: -20 //center 

     }, 
     subtitle: { 
      text: '', 
      x: -20 
     }, 
     xAxis: { 
      categories: ['Januar', 'Februar', 'Marts', 'April', 'Maj', 'Juni','Juli', 'Aug', 'Septemper', 'Oktober', 'November', 'December'],labels: 
     { 
      enabled: false 
     } 

     }, 
     yAxis: { 
      title: { 
       text: '' 
      }, 
      labels: 
     { 
      enabled: false 
     }, 
      plotLines: [{ 
       value: 0, 
       width: 1, 
       color: '#808080' 
      }] 
     }, 
     tooltip: { 
      valueSuffix: 'Kr.' 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'middle', 
      borderWidth: 0 
     }, 
      credits: { 
      enabled: false 
     }, 

     series: [{ 
      showInLegend: false, 
      name: 'Tokyo', 
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 
     }] 
    }); 
});</script> 

в шаблоне страницы, я добавил следующие

<div id="chart-container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 

Answer 1

Похоже, что вы пытаетесь загрузить что-то похожее на jsfiddle пример из Highcharts. com: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/

Ваша первая ошибка, Uncaught reference: $ is not defined на вашей консоли Javascript при загрузке страницы означает, что вы не загружаете jQuery библиотека, которая является требованием для высоких диаграмм.

Перед загрузкой необходимо загрузить jquery. В этом примере используется jquery 1.9.1, поэтому вы должны загрузить эту версию (или выше), прежде чем включать в нее библиотеку highcharts. Например.

... 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script‌​> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 

... 

(Имейте в виду, что Althought этот метод должен работать, WordPress имеет свой собственный и более подходящий способ включить JQuery или любой библиотекой JavaScript на шаблоне страницы, чтобы избежать конфликтов. См http://codex.wordpress.org/Function_Reference/wp_enqueue_script и http://codex.wordpress.org/Function_Reference/wp_register_script)

Ваш вторая ошибка заключается в том, что вам нужно дождаться существования контейнера (домом), прежде чем пытаться манипулировать его контентом.

Вы можете сделать это, используя функцию готовности документа jQuery. Что-то вроде:

<script type="text/javascript"> 
    $(document).ready({ 
    $('#chart-container').highcharts({ 
     title: { 
      text: '', 
      x: -20 //center 

     }, 

    ... 

    }); 
    }); 

... 

</script> 

(Более подробную информацию о http://learn.jquery.com/using-jquery-core/document-ready/)

Эти родственные ответы могут помочь вам тоже:

How could I embed a HighCharts interactive graph into a wordpress 3.5.1 page?

highcharts and wordpress

Наконец, вы можете быть заинтересованы на пару плагинов для WordPress FOS, которые уже выполняют тяжелую работу по созданию для вас высокого ранга:

https://wordpress.org/plugins/rj-quickcharts/

https://wordpress.org/plugins/table2chart/