Highcharts:高交互性的javascript图表类库

======================================================
注：本文源代码点此下载
======================================================

highcharts:高交互性的javascript图表类库

一、highcharts简介：

二、highcharts图表预览

1、直线图

2、曲线图

3、散状图

4、区域图

5、区域曲线图

6、柱状图

7、饼状图

三、调用方式

1、效果

2、调用代码

3、代码说明

四、总结

一、highcharts简介:

highcharts是一个制作图表的javascript类库,可以制作的图表有:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散状图等等。主要特性:

1、 提示功能:鼠标移动到图表的某一点上有提示信息

2、 放大功能:选中图表部分放大,近距离观察图表

3、 对个人用户完全免费,这一点很重要的

4、 兼容性:兼容当今所有的浏览器,包括iphone、ie和火狐等等

5、 跨语言:不管是php、asp.net还是java都可以使用,它只需要三个文件:一个是highcharts的核心文件highcharts.js,还有a canvas emulator for ie和jquery类库或者mootools类库

6、 支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图

7、 易用性:无需要特殊的开发技能,只需要设置一下选项就可以制作适合自己的图表

8、 时间轴:可以精确到毫秒

9、 ajax支持: 使用数组接受ajax传值

二、highcharts图表预览

1、直线图

2、曲线图

3、散状图

4、区域图

5、区域曲线图

6、柱状图

7、饼状图

更多demo请参考官方网站:http://www.highcharts.com/demo/

三、调用方式

以ajax返回数据到chat数据组为例,

1、效果

2、调用代码

var chart = new highcharts.chart({

chart: {

renderto: 'container',

defaultseriestype: 'spline'

},

title: {

text: 'monthly average temperature in tokyo'

},

subtitle: {

text: 'source: worldclimate.com'

},

xaxis: {

categories: ['jan', 'feb', 'mar', 'apr', 'may', 'jun',

'jul', 'aug', 'sep', 'oct', 'nov', 'dec'],

title: {

text: 'month'

}

},

yaxis: {

title: {

text: 'temperature (°c)'

}

},

legend: {

enabled: false

},

tooltip: {

formatter: function() {

return ''+ this.series.name +'

'+

this.x +': '+ this.y +'°c';

}

},

series: [{

name: 'tokyo',

dataurl: 'tokyo.json'

}]

});

3、代码说明

defaultseriestype:图表类别,可取值有:line、spline、area、areaspline、bar、column等等

title:最顶端的标题

subtitle:最顶端的子标题

xaxis:x轴,数据以数组的形式组装

yaxis:y轴,数据以数组的形式组装

tooltip:提示信息

series:ajax获得数据放到数据里面

四、总结

此chats js类库,使用比较简单,而且样式多种,效果绚丽。唯一的缺陷是,个人免费的生成的chat应该会有官方的网址。 不过也是有办法处理的,对生成的chat进行cut,应该可以把官方的网址去掉。

其他链接

<推荐>35个优秀的电子商务网站界面

表单元素：40个css/js风格和功能技术处理

推荐jquery 40个漂亮的导航菜单设计

版权

作者:灵动生活

出处:http://www.cnblogs.com/ywqu

如果你认为此文章有用,请点击底端的【推荐】让其他人也了解此文章,

你也可以加我的新浪微博,以便实时了解我的动态:http://weibo.com/ywqu

wowo mandarin(英语培训):http://www.wowomandarin.com

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

标签: jquery, asp.net chat 图表, javascript图表类库, highcharts

绿色通道:好文要顶关注我收藏该文与我联系

posted @ 2009-12-04 21:44灵动生活 阅读(7097) 评论(11)编辑 收藏

发表评论

2233209

回复 引用 查看

#1楼 2009-12-04 22:41 夕颜

很不错哦～感谢分享

回复 引用 查看

#2楼 2009-12-04 23:45 riccc

今天在dzone上面看到介绍,过去看了一下,图画的很漂亮

回复 引用 查看

#3楼 2009-12-05 08:30 侯垒

非常不错。

回复 引用 查看

#4楼 2009-12-05 09:42 深山老林

谢谢分享,太感谢了。

回复 引用 查看

#5楼 2009-12-05 10:13 卡索

不错的东东!

这个生成的chart中是可以把highcharts.com这个部分给干掉的,因为这是js的东东 只要后好分析下下就可以搞定啦!不过貌似这么做不是很好啊!o(∩_∩)o~

这个是基于canvas来画图的,ie下使用vml来画图

回复 引用 查看

#6楼[楼主] 2009-12-05 10:42 灵动生活

@卡索

是可以去掉的

回复 引用 查看

#7楼 2009-12-08 15:53 icebird

credits: { enabled: false,

回复 引用 查看

#8楼 2009-12-17 16:08 飞笑

也提供一个flash的:

http://teethgrinder.co.uk/open-flash-chart/

回复 引用 查看

#9楼 2009-12-18 12:43 pay100

不错的东东

回复 引用 查看

#10楼 2011-08-30 13:31 bgrace

博主,当数据量比较大的时候,在ie里面就死掉了吧。不信你试试!

回复 引用 查看

#11楼 2011-11-02 10:15 唐子慧

谢谢学习

注册用户登录后才能发表评论,请 登录 或 注册,返回博客园首页。

首页博问闪存新闻园子招聘知识库

最新it新闻:

·windows 7官方rss动态主题：《昆虫》

·捡到iphone 4s玩自拍 icloud同步酿悲剧

·铁道部购票网站存泄密危险 cdn服务商技术短板是主因

·利用 mimo magictouch 打造另类的平板电脑

·但愿大嘴巴的消息再次失准

» 更多新闻...

最新知识库文章:

·设计师的品牌意识

·如何成为“10倍效率”开发者

·快速排序（quicksort）的javascript实现

·wcf服务端运行时架构体系详解[续篇]

·wcf服务端运行时架构体系详解[下篇]

» 更多知识库文章...

china-pub 2011秋季教材巡展

china-pub 计算机绝版图书按需印刷服务

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/