添加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

看起來你要加載類似於從highcharts的例子的jsfiddle東西。 com：http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/

您的第一個錯誤，您的Javascript控制檯上的Uncaught reference: $ is not defined加載頁面時意味着你不加載jQuery圖書館，這是高層圖的要求。

你必須highcharts之前加載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

最後，你可能有興趣在幾個FOS wordpress插件已經爲你創建了一張高清圖表：

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

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