Question

我正在尝试向自定义页面模板添加高图。

到目前为止，我已在头文件中添加了以下代码中间的代码，并将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.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和http://codex.wordpress.org/Function_Reference/wp_register_script）< / p>

您的第二个错误是在尝试操作其内容之前必须等待容器存在（dom ready）。

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

在wordpress中添加高图

1 个答案: