将 highchart 添加到 wordpress

Question

我正在尝试将图表添加到自定义页面模板。

到目前为止，我已经在 header 文件中添加了以下代码 in-between header，并将 div 添加到页面模板中。问题是图表没有显示在我的页面模板中。

没有显示的原因可能是什么？

在 header 标签之间的文件中

    <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.com 中的 jsfiddle 示例的内容：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 的要求。

您必须在 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>

...

（请注意，尽管此方法应该有效，但 WordPress 有自己的更合适的方法来在页面模板上包含 jQuery 或任何 javascript 库以避免冲突。请参阅 http://codex.wordpress.org/Function_Reference/wp_enqueue_script and http://codex.wordpress.org/Function_Reference/wp_register_script )

您的第二个错误是您必须等待容器存在（dom 准备就绪）才能尝试操作其内容。

您可以使用 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/

将 highchart 添加到 wordpress

adding a highchart into wordpress

html

javascript

wordpress

jquery

highcharts