Highcharts:强大的jQuery图表制作功能

标签: 交互体验 推荐分享 | 发表时间:2011-07-09 11:07 | 作者:webfenxi 和谐海洋
出处:http://www.ued163.com

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,应该可以把官方的网址去掉。

相关 [highcharts jquery 图表] 推荐:

JQuery图表插件——Highcharts

- We_Get - 博客园-首页原创精华区
因为项目中需要用到图表生成,所有Google了下,找到了这个插件,顺带写了个DEMO. 先上三个图,分别是曲线、柱状、扇形. 图表中的数据纯属于DEMO的测试数据,没有实际用意. 第一步,下载并且引用JS包(highcharts.js),theme顾名思义是放皮肤的. 可以下载DEMO逐一试试就知道效果怎么样了,上图就应用了两个样式.

Highcharts:强大的jQuery图表制作功能

- 和谐海洋 - UED TEAM,用户体验设计,web前端开发
Highcharts是一个制作图表的Javascript类库,可以制作的图表有:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散状图等等.  1、提示功能:鼠标移动到图表的某一点上有提示信息. 2、放大功能:选中图表部分放大,近距离观察图表. 3、对个人用户完全免费,这一点很重要的. 4、兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等.

10 个 jQuery 的图表插件推荐

- - 博客 - 伯乐在线
交互式图表是Web应用中不可或缺的一部分,一个优秀的图表,不仅可以令数据一目了然,而且可以极大地增强应用的用户体验. 本文带来10个非常酷的JavaScript图表库,有简单的也有复杂的,以满足不同的需求. 一个基于D3.js的插件,可以实时显示时间序列. D3.js是一个针对HTML和SVG的JavaScript可视化库.

Javascript框架和jQuery应用情况的信息图表(Infographic)

- Will - ITeye资讯频道
我们总是想知道时下最流行的一些JavaScript框架和由于这些框架所开发的Web应用程序的比较情况. 下面就是一张体现这些比较数据的信息图表. 它包括了jQuery、Mootools、Prototype、YUI、Dojo、Extjs等这些框架的被使用情况. 从信息图表中你可以看出,比较有意思的一点就是1.3.2版本的jQuery是目前最流行的版本.

使用 amcharts 和 highcharts 绘制多曲线图的通用方法

- - CSDN博客Web前端推荐文章
       工作中用到, 这里分享一下. 可以使用 amcharts 和 highcharts 在同一坐标中绘制多个对比曲线图. 当然, 对图形没有过多装饰, 可以参考 API 文档:.       amcharts 与 highcharts 对于数据格式的要求是不一样的.        由于 javascript 所使用的标准数据格式是 JSON, 因此, 可以非常方便地进行数据拼接和组合.

JQuery 选择器

- - CSDN博客Web前端推荐文章
}

点击我

.    像上面这样把JavaSript代码和HTML代码混杂在一起的做法同样也非常不妥,因为它并没有将网页内容和行为分离,所以才有JQuery选择器的学习.

点击我

. //给class为demo的元素添加行为.

jquery操作xml

- - CSDN博客Web前端推荐文章
jquery真的很强大,虽然一直在用jquery,不用一直都没有深入,这几天重新学习了一下,不得不感叹她的强大,已经让我深深入迷. 这里记录一下,她是怎么快速地操作xml的.. 这里我们有一个xml文件:. jquery如何操作呢,总的思想,就是和操作dom差不多的方法. 首先我们获取这个文件的内容:(我先引入jquery库哈).

jQuery JSONP跨域

- - Web前端 - ITeye博客
基于Jquery的Ajax跨域访问. 单点登录服务器(sso服务器). 登录网页项目的时候,由于使用了单点登录,所以页面会跳转到sso服务器,进行统一登录,. 现在需要在该界面增加令牌的认证,但是SSO服务器和令牌服务器部署在不同的服务器,且暂时没有要合并的可能,所以在SSO登录的时候必须要对令牌进行验证,就必须涉及到了跨域访问的问题.

jquery 插件

- - JavaScript - Web前端 - ITeye博客
 jQuery插件的开发包括两种:. 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法. jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法. 下面就两种函数的开发做详细的说明. 1 、类级别的插件开发.

让jquery更快

- - JavaScript - Web前端 - ITeye博客
很久没有关注jQuery了,最近重新看了一下,看到一些不错的文章,转来坐一下笔记. 其内容和一些新提供的方法还是很多有值得学习的地方. 使用最新版本的jQuery. jQuery的版本更新很快,你应该总是使用最新的版本. 因为新版本会改进性能,还有很多新功能. 下面就来看看,不同版本的jQuery性能差异有多大.