0

我的名字是乔希，我在一家社区大学报纸工作。我最近才发现 Highcharts 并试图将交互式图表嵌入到我们网站的帖子中，但没有成功。实际上，这是一次彻底的失败。

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

没有人知道我可以向谁提出这个问题，即使我觉得我已经尝试了所有建议的解决方案，但不幸的是，我在 html 和代码方面相当文盲。任何帮助将不胜感激。

我正在使用 Wordpress 3.5.1 这是我目前所处的位置：我正在运行：在帖子和页面插件和交互式 Javascript 和 CSS 中允许 PHP。

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

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

该页面出现空白，就像过去一百次左右的尝试一样。如果这是张贴在错误的位置或不受欢迎的地方，我深表歉意。非常感谢任何建议或解决方案。

谢谢你，J

4

2 回答 2

0

为了使图表呈现，您需要准备好几件事：

  1. 包括 highcharts.js - 完成
  2. 包括一些定义和创建图表的 javascript - 完成
  3. 给 highcharts 一个放置图表的地方 - ?

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

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

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

要在 wordpress 中添加此内容，请进入帖子编辑器并确保您处于“html”模式。在我的 wordpress 版本中，这是一个位于帖子编辑窗格右上角的选项卡，带有“visual”和“html”选项。

在 html 模式下，只需在您希望图表出现的位置添加我的 div 代码即可。希望这能解决问题。

于 2013-03-22T08:58:45.127 回答
0

图表未显示可能有多种原因。

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

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

high stock/highcharts 库的路径当然会根据它在服务器上的位置而改变。

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

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

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

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

于 2013-05-03T18:22:45.413 回答