文档介绍:Highcharts 强大的jQuery图表制作功能
 
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、,它只需要三个文件:,还有a canvas emulator for IE和Jquery类库或者MooTools类库
6、 支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图
7、 易用性:无需要特殊的开发技能,只需要设置一下选项就可以制作适合自己的图表
8、 时间轴:可以精确到毫秒
9、 Ajax支持: 使用数组接受Ajax传值
 
二、Highcharts图表预览
1、直线图
 
2、曲线图
 
3、散状图
 
 
4、区域图
 
5、区域曲线图
 
 
6、柱状图
 
7、饼状图
更多Demo请参考官方网站:/
 
三、调用方式
以Ajax返回数据到Chat数据组为例,
1、效果
 
 
2、调用代码
var chart = new ({
   chart: {
      renderTo: 'container',
      defaultSeriesType: 'spline'
   },
   title: {
      text: 'Monthly Average Temperature in Tokyo'
   },
   subtitle: {
      text: 'Source: '
   },
   xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
         'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      title: {
         text: 'Month'
      }
   },
   yAxis: {
      title: {
         text