Highcharts:高交互性的javascript图表类库
来源:互联网 发布:我的世界mac版图片 编辑:程序博客网 时间:2024/05/01 22:19
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、直线图
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 '<b>'+ this.series.name +'</b><br/>'+
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个漂亮的导航菜单设计
- Highcharts:高交互性的javascript图表类库 (转)
- Highcharts:高交互性的javascript图表类库
- Highcharts:高交互性的javascript图表类库
- JavaScript Highcharts 图表库
- JavaScript- 图表库Highcharts
- 【Highcharts.js 】完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库
- 优秀的JavaScript图表库:Highcharts
- 用Highcharts轻松构建交互性图表
- Highcharts 基于web的纯javascript图表库
- 纯Javascript图表 Highcharts
- Highcharts图表的setCategories
- Highcharts 是一个用纯JavaScript编写的一个图表库
- 纯JavaScript编写的开源图表库Highcharts v6.0.1发布 | 附下载
- Highcharts是一个制造图表的纯Javascript种库
- Highcharts是一个制作图表的纯Javascript类库
- Highcharts是一个制作图表的纯Javascript类库
- Highcharts是一个制作图表的纯Javascript类库
- Highcharts:非常漂亮的图表
- .NET的winform中listview的绑定
- MYSQL 无法创建innodb类型的表
- 雷锋网专访安卓越科技CEO海林
- ora-01536:超出表空间"XXXX"的空间限额的解决办法
- 使用 Socket 通信实现 FTP 客户端程序(一)
- Highcharts:高交互性的javascript图表类库
- 百度面试题
- 为什么头文件中都有 #ifndefine #define #endif
- Index of /linux-docbook
- 《C语言名题精选百则----13》
- myBatis自动生成工具
- C++项目中的extern "C" {}(转自:http://www.cnblogs.com/skynet/archive/2010/07/10/1774964.html)
- RTX系统下PCI PCI-E外设的驱动开发
- Linux下spi驱动开发理论框架