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