Question

我的名字是Josh，我在社区大学报纸上工作。我刚刚发现了Highcharts并且一直在尝试将交互式图表嵌入到我们网站的帖子中，但是没有成功。实际上，这是彻底的失败。

我已经阅读并尝试过这篇文章无济于事： highcharts and wordpress

我不知道有谁可以解决这个问题，即使我觉得我已经尝试了所有建议的解决方案，不幸的是，当谈到HTML和代码时，我还是很不文明。任何帮助将不胜感激。

我正在使用Wordpress 3.5.1以下是我目前的观点：我正在运行：在帖子和页面插件中允许PHP＆amp;交互式Javascript和CSS。

对于帖子的标题选项我有：

<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js">    </script>
<script src="http://www.domain.com/wp-content/uploads/2013/03/highcharts1.js"    type="text/javascript"></script>

在一些网站（包括这个网站）中，我看到过将Highcharts库上传到wordpress服务器上的提及。我已经通过媒体库上传了highcharts.js文件，但我觉得我这样做不正确？

在帖子中我放置了：

[php]
$(function () {
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line',
            marginRight: 130,
            marginBottom: 25
        },
        title: {
            text: 'State Funding of DSPS Services',
            x: -20 //center
        },
        subtitle: {
            text: 'Source:MPR Associates Report',
            x: -20
        },
        xAxis: {
            categories: ['2003-04', '2004-05', '2005-06', '2006-07', '2007-08',
                '2008-09', '2009-10', '2010-11', '2011-2012', '2012-13']
        },
        yAxis: {
            title: {
                text: '$ Million'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function() {
                    return '<b>'+ this.series.name +'</b><br/>'+
                    this.x +': '+ this.y +' Million';
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        series: [{
            name: 'College Total Funding',
            data: [77.8, 81.8, 86.2, 102.1, 109.3, 108.9, 64.9, 64.8, 64.6, 65.7]

        }]
    });
});

});
[/php]
<div id="container" style="width: 100%; height: 400px"></div>

页面显示为空白，因为过去一百次尝试都是如此。如果这是在错误的地方发布或不受欢迎，我道歉。任何建议或解决方案都非常感谢。

谢谢你， Ĵ

Answer 1

为了获得呈现的图表，您需要做好几件事：

包括highcharts.js - 已完成
包含一些定义和创建图表的javascript - 已完成
给highcharts一个放置图表的地方 - ？

我想你可能会错过最后一个元素。这是通过在帖子中的某处包含标签来完成的。可以使用'id'属性命名div，如下所示：

<div id='container'>mydiv</div>

你已经告诉highcharts你想'renderTo'一个叫'容器'的地方，所以这应该是你所需要的。

要在wordpress中添加它，请进入帖子编辑器并确保您处于'html'模式。在我的wordpress版本中，这是一个位于帖子编辑窗格右上角的选项卡，其中包含“视觉”和“html”选项。

在html模式下，只需在我想要显示图表的位置添加我的div代码。希望这会成功。

Answer 2

图表没有出现可能有几个原因。

1）脚本（jquery和highcharts）需要加载到你的页面上，这在wordpress中并不是很明显。有几种方法 - 如果你不是编码器，那么最简单的方法就是去你主题的header.php。（Appearance-＆gt; Editor）并在右侧查找header.php文件。在head部分，您需要注册highcharts库...

    wp_register_script('myHighchartsHandle','highcharts/js/highstock.js',array('jquery'),'1.0a');
    wp_enqueue_script('myHighchartsHandle');

高库存/高图库的路径将根据服务器上的位置而改变。

2）代码是javascript - 你提供的代码有php标签。我想你可以编辑它在方括号中有js标签并安装'允许javascript在帖子和页面'插件。请注意，插件需要使用反斜杠为代码中的任何方括号添加前缀，因此您需要这样做才能正确格式化数据系列。

3）看起来你的代码外面有一个div容器，这很好。但是，正如另一个答案所示，您将需要它，并且id必须与代码中的renderTo匹配。

4）如果在这3个步骤之后它不起作用，那么你可能会违反jQuery noConflict.Wordpress默认情况下在此模式下设置jquery。你可能不得不用jQuery代替$而不是你的js代码中的$。你使用的代码中的highcharts库是可以的。

如果需要，很乐意提供更多帮助。我已经将其中的大部分内容构建成一个更清洁的插件......

我怎么能将HighCharts交互图嵌入到wordpress 3.5.1页面？

2 个答案: