日期:2014-05-16  浏览次数:20344 次

Highcharts纯Javascript图表使用讲解(附Demo全源码案例)

Highcharts是一个制作图表的纯Javascript类库,主要特性如下:

  • 兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等;
  • 对个人用户完全免费;
  • 纯JS,无BS;
  • 支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图;
  • 跨语言:不管是PHP、Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有a canvas emulator for IE和Jquery类库或者MooTools类库;
  • 提示功能:鼠标移动到图表的某一点上有提示信息;
  • 放大功能:选中图表部分放大,近距离观察图表;
  • 易用性:无需要特殊的开发技能,只需要设置一下选项就可以制作适合自己的图表;
  • 时间轴:可以精确到毫秒;

 

Highcharts 官网:http://www.highcharts.com

Highcharts 官网示例:http://www.highcharts.com/demo/

Highcharts 官网文档:http://www.highcharts.com/documentation/how-to-use

 

Highcharts提供大量的选项配置参数,您可以轻松定制符合用户要求的图表,目前官网只提供英文版的开发配置说明文档,而中文版的文档网上甚少,且零散不全。这里,我把Highcharts常用的最核心的参数选项配置整理成文档,与大家分享。

Chart:图表区选项

Chart图表区选项用于设置图表区相关属性。

参数 描述 默认值
backgroundColor 设置图表区背景色 #FFFFFF
borderWidth