highcharts和wordpress [英] highcharts and wordpress

问题描述

例如，我已将代码添加到我的标题中：

 < script src =http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js> ;< /脚本> 
< script src =http://code.highcharts.com/highcharts.js>< / script> 
  

但是这提供了一个服务器错误。

是否有人可以提供一步一步的基本图表，以便我可以看到它工作。谢谢。

解决方案

忽略以前的不完整答案。这是更完整的。 Nick。

嗨 - 我有同样的问题，因为Wordpress会去掉很多HTML标签。你需要做一些下面提到的事情。希望它可以帮助你。 1）你需要绕过Wordpress剥离你的代码，所以安装插件允许Javascript在帖子和页面checkout hitreach.co.uk为插件。

2）告诉你的网页关于highcharts库 - 我实际上把它放在我的header.php中，因为我经常使用图表。你可能更喜欢把它放在帖子本身。

对于header.php方法 - 在关闭head标签前放置一个到highcharts库的链接。我把jquery链接和highstock.js链接放在那里。当然，我必须将js库放在我的服务器上。我把链接放在这里

 < script src =http://ajax.googleapis.com/ajax/libs /jquery/1.7.1/jquery.min.jstype =text / javascript>< / script> 
< script src =http://www.yourdomain.com/wp-content/plugins/highcharts/js/highstock.jstype =text / javascript>< / script> 
  

注意我必须在我的服务器上放置highstock.js文件 - 第二个链接显示我放置的位置它。

3）创建一个新帖子，在这里你需要用这些新标签包装js代码：

  [js]您的JS代码[/ js] 
  

以下是完整的帖子...

  [js] 
 
 $（function（）{
 $ .getJSON（'http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json& callback = ？'，函数（数据）{
 
 //创建图表
 window.chart = new Highcharts.StockChart（{
图表：{
 renderTo：'container '
}，
 
 rangeSelector：{
 selected：1 
}，
 
 title：{
 text：'AAPL股票价格'
}，
 
系列：\ [{
名称：'AAPL股票价格'，
数据：数据，
标记：{ 
 enabled：true，
 radius：3 
}，
 shadow：true，
 tooltip：{
 valueDecimals：2 
} 
} \] 
}）; 
}）; 
}）; 
 $ b [bs] 
 
< div id =containerstyle =width：100％; height：400px>< / div> 
  

Can someone outline the steps to adding highcharts to Wordpress.

For example, I've added in the code to my header:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

But this provides a server error.

Is there a step-by-step anyone can provide including a basic chart so I can see it working. Thanks.

解决方案

Pressed post on wrong tab! Ignore previous incomplete answer. This is fuller. Nick.

Hi - I had the same problem as Wordpress strips out a lot of HTML tags. You need to do a few things mentioned below. Hope it helps you. Nick.

1) You need to bypass Wordpress stripping out your code so install the plugin "Allow Javascript in Posts and Pages" checkout hitreach.co.uk for the plugin.

2) Tell your page about the highcharts library - I actually put it in my header.php because I use charts frequently. You may prefer to put it in the post itself.

For the header.php approach - put a link to the highcharts library before the closing head tag. I put both the jquery link and highstock.js link there. I had to put the js libraries on my server of course. I put the links in like this

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"        type="text/javascript"></script>
<script src="http://www.yourdomain.com/wp-content/plugins/highcharts/js/highstock.js"    type="text/javascript"></script>

Notice I had to have the highstock.js file on my server - the second link shows where I put it.

3) Create a new post and in there you'll need to wrap the js code with these new tags:

[js] Your JS Code [/js]

The [js] tags effectively replace the script tags in regular html.

Here's the full post...

[js]

  $(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-       c.json&callback=?', function(data) {

    // Create the chart
    window.chart = new Highcharts.StockChart({
        chart : {
            renderTo : 'container'
        },

        rangeSelector : {
            selected : 1
        },

        title : {
            text : 'AAPL Stock Price'
        },

        series : \[{
            name : 'AAPL Stock Price',
            data : data,
            marker : {
                enabled : true,
                radius : 3
            },
            shadow : true,
            tooltip : {
                valueDecimals : 2
            }
        }\]
    });
    });
 });

[/js]

<div id="container" style="width: 100%; height: 400px"></div>

这篇关于highcharts和wordpress的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！