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配置
http://www.cnblogs.com/jsonzheng/archive/2011/05/13/2045344.html
?
去除右下角官网:credits:{enabled:false;}
三、 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 '<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 : a jax 获得数据放到数据里面