JQuery图表插件——Highcharts
标签:
jquery
图表
插件
| 发表时间:2011-09-09 16:16 | 作者:LyIng.Net We_Get
出处:http://www.cnblogs.com/
因为项目中需要用到图表生成,所有Google了下,找到了这个插件,顺带写了个DEMO。点击跳转官网
先上三个图,分别是曲线、柱状、扇形。
图表中的数据纯属于DEMO的测试数据,没有实际用意。下面讲下大致的实现步骤
第一步,下载并且引用JS包(highcharts.js),theme顾名思义是放皮肤的。可以下载DEMO逐一试试就知道效果怎么样了,上图就应用了两个样式。download中放的是打印和导出成图片的js文件(貌似是通过js上传到官网,然后再下载到本地),因为项目是放到内网的所以就没有用了。
第二步,实现,贴代码。
var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container', //放置图表的容器 plotBackgroundColor: null, plotBorderWidth: null, defaultSeriesType: 'line' }, title: { text: 'JQuery曲线图演示' }, subtitle: { text: '副标题' }, xAxis: {//X轴数据 categories: ['一月份', '二月份', '三月份', '四月份', '五月份', '六月份', '七月份', '八月份', '九月份', '十月份', '十一月份', '十二月份'], labels: { rotation: -45, //字体倾斜 align: 'right', style: { font: 'normal 13px 宋体' } } }, yAxis: {//Y轴显示文字 title: { text: '产量/百万' } }, tooltip: { enabled: true, formatter: function() { return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + Highcharts.numberFormat(this.y, 1); } }, plotOptions: { line: { dataLabels: { enabled: true }, enableMouseTracking: true//是否显示title } }, series: [{ name: '杭州', data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, { name: '江西', data: [4.0, 2.9, 5.5, 24.5, 18.4, 11.5, 35.2, 36.5, 23.3, 38.3, 23.9, 3.6] }, { name: '北京', data: [14.0, 12.9, 15.5, 14.5, 28.4, 21.5, 15.2, 16.5, 13.3, 28.3, 13.9, 13.6] }, { name: '湖南', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] }] }); });
这写都是配置,最重要的就是series里面的数据了,如果需要从数据库中取出来的话,直接生成json然后赋值上去就OK了,效果很炫,还有动态感,感兴趣的朋友可以下载下来跑跑。
注意,DEMO里的download文件夹中的js文件,本来导出及打印的一些提示是英文,我已经修改成中文了,在引用js文件的时候需要 charset="gb2312",具体DEMO中我已经写好了注释。好的,到此为止。下载地址
作者: LyIng.Net 发表于 2011-09-09 16:16 原文链接
最新新闻:
· 5个基于HTML5的加载动画推荐(2011-09-09 18:04)
· 湖南愤怒小鸟主题公园并未遭Rovio起诉反而建立合作(2011-09-09 18:00)
· 亚马逊推迟征税将令加州损失2 亿美元收入(2011-09-09 17:59)
· 研究表明盗版严重损害Android开发者利益(2011-09-09 17:59)
· 桔子酒店宣布起诉Google侵犯商标权(2011-09-09 17:57)
相关 [jquery 图表 插件] 推荐:
因为项目中需要用到图表生成,所有Google了下,找到了这个插件,顺带写了个DEMO. 先上三个图,分别是曲线、柱状、扇形. 图表中的数据纯属于DEMO的测试数据,没有实际用意. 第一步,下载并且引用JS包(highcharts.js),theme顾名思义是放皮肤的. 可以下载DEMO逐一试试就知道效果怎么样了,上图就应用了两个样式.
10 个 jQuery 的图表插件推荐
- - 博客 - 伯乐在线交互式图表是Web应用中不可或缺的一部分,一个优秀的图表,不仅可以令数据一目了然,而且可以极大地增强应用的用户体验. 本文带来10个非常酷的JavaScript图表库,有简单的也有复杂的,以满足不同的需求. 一个基于D3.js的插件,可以实时显示时间序列. D3.js是一个针对HTML和SVG的JavaScript可视化库.
jquery 插件
- - JavaScript - Web前端 - ITeye博客 jQuery插件的开发包括两种:. 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法. jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法. 下面就两种函数的开发做详细的说明. 1 、类级别的插件开发.
常用JQuery插件整理
- xxg - 博客园-首页原创精华区 虽然自己也写过插件,但JQuery插件种类的繁多,大多时候,我还是使用别人写好的插件,这些都是我用了同类插件里较为不错的一些,今天就整理一下公开放出来. jquery.HooRay(哈哈,自己写的插件是必须有的). jquery UI(官方的UI插件,功能很多,但我只用少数几个). artDialog(很欣赏这个插件,又强大又美观).
2010年最佳jQuery插件
- seenxu - 博客园新闻频道在2010年,JavaScript框架继续日渐普及,这使得大量的插件被开发出来. WDL的作者从大量的优秀 jQuery插件精心筛选出一些对Web Designers有帮助的和具备非常不错的视觉效果的Best of the best. 2010年最佳jQuery插件(排名不分先后):. 一个加载设置拥有9种过度效果的超级smooth slider,它还支持如链接图像和键盘导航等内容.
[原]jQuery ListBox Plugin(ListBox插件)
- We_Get - 博客园-首页原创精华区转载请注明作者(think8848)和出处(http://think8848.cnblogs.com). 未经作者同意,请勿擅自修改本文内容. 这两天项目中要用到类似于ListBox的功能了,本以为有很多jQuery插件,没有想到的是,居然没有搜到好用的,咋办呢,自已动手丰衣足食吧,于是花了一个晚上的时间做出来一个,上效果图:.
jquery Dialog - 弹出窗插件
- Bloger - 博客园-首页原创精华区 分享几个jquery Dialog弹出窗插件. 1)Zebra_Dialog是一个可灵活配置的对话框jQuery插件,大小只有4KB,要求jQuery 1.5.2+支持. 可用于替换JavaScript原始的“alert” 和“confirmation”对话框. 这个插件使用jQuery Plugin Boilerplate构建.
jQuery 插件autocomplete 应用
- Bloger - 博客园-首页原创精华区 项目中有时会用到自动补全查询,就像Google搜索框、淘宝商品搜索功能,输入汉字或字母,则以该汉字或字母开头的相关条目会显示出来供用户选择, autocomplete插件就是完成这样的功能. autocomplete官网 : http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ (可下载jQuery autocomplete插件).
jquery插件的开发
- - CSDN博客推荐文章插件的概念大家并不陌生了,插件可以很方便我们进行代码开发,大大节约了我们的开发时间. 以前我用jquery都是自己洗一大把的代码,复用性不高维护也不方便. 因此自己学着开发了2个简单的jquery插件. 下面先看下jquery插件的分类. jQuery开发分为两种:. 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法.
jQuery 绘图插件:jqPlot
- - 我爱水煮鱼jqPlot 是一个 jQuery 这个 JavaScript 框架的绘图插件, jqPlot 能够产生很多漂亮优雅的线图和条形图. 默认最优设置,非常易于使用. jQuery 绘图插件:jqPlot. 使用 jqPlot 基本可以控制图表的每一个部分,如网格的背景,字体和大小,等等,并且 jqPlot 自己本身也有插件支持系统,所以它可以很容易扩展新的图表类别和选项.