Highcharts-制作图表的js库
Highcharts简介：
<div class="postBody">
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、直线图
http://hiphotos.baidu.com/502219432/pic/item/c69ff5ee52cf686a2cf534bb.jpg
2、曲线图
http://hiphotos.baidu.com/502219432/pic/item/673e81fe3ff5ee725d6008bb.jpg
3、散状图
http://hiphotos.baidu.com/502219432/pic/item/d3eedd31f4b066eb5fdf0ebb.jpg
4、区域图
http://hiphotos.baidu.com/502219432/pic/item/16ab55a8f40fdff2ca130cbb.jpg
5、区域曲线图
http://hiphotos.baidu.com/502219432/pic/item/1414ecb167c31b17082302bb.jpg
6、柱状图
http://hiphotos.baidu.com/502219432/pic/item/81d82854a7f38f17574e00bb.jpg
7、饼状图
http://hiphotos.baidu.com/502219432/pic/item/43e8bc54e69ec01bd00906bb.jpg
更多Demo请参考官方网站：http://www.highcharts.com/demo/
四、调用方式
以Ajax返回数据到Chat数据组为例，
1、效果
http://hiphotos.baidu.com/502219432/pic/item/1c85f35863d9e19d9d8204bb.jpg
2、调用代码
<div style="padding: 4pt 0cm 4pt 8pt; border: 1pt 1pt 1pt 6pt dotted dotted dotted solid #aab4be #aab4be #aab4be #b4b4b4;">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' }]});
页:
[1]