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