当前位置: 代码迷 >> JavaScript >> Highcharts-制造图表的js库
  详细解决方案

Highcharts-制造图表的js库

热度:636   发布时间:2012-10-24 14:15:58.0
Highcharts-制作图表的js库


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 获得数据放到数据里面