JavaScript 图表组件之 ACharts

    ACharts是基于Raphael 库开发的，而Raphael.js是基于svg和vml语言，因此最低可以兼容到IE6+,而最高则所有支持w3c svg标准的现代浏览器都可以使用，svg甚至在手机平台也能有不错的表现。本项目是由某淘宝大神开发，目测是淘宝某大神开发的后台管理框架BUI中使用的图表库，功能完善，兼容性好，MIT协议，完全免费。。。

    ACharts - javascript 图形组件,全面的图形库，折线图、柱状图、区域图、饼图以及各种其他类型图形,易于使用,方便扩展。

在线实例

使用教程

引入cdn上的代码

  <script src="http://g.tbcdn.cn/bui/acharts/1.0.15/acharts-min.js"></script>

使用,引入acharts文件后，会在window上增加Chart变量代表Chart控件类

var chart = new AChart({
  //configs
});
// use acharts

图表的属性

1. id 图表渲染到的容器的id，必须

2. width 图表的宽度，如果设置forceFit :true,则自动计算宽度

3. height 图表的高度

4. data 图表的数据，如果此属性设置，series内部就不需要设置data

5. forceFit 图表宽度自适应，窗口发生改变时，图表宽度自适应

6. fitRatio 如果设置了forceFit 那么宽高的比例由此属性决定，默认0，不按照比例设置高度

7. plotCfg 图表的边框、背景设置，详细信息参考：图表背景，wiki

8. title 图表标题，设置null时不显示，是一个文本图形

9. subTitle 图表子标题，设置null时不显示，是一个文本图形

10. xAxis x轴坐标，对应 Axis类，更多坐标轴文档

11. type 标示坐标轴类型会转换成对应的坐标轴，例如 Axis.Number 对应 type : 'number';Axis.Circle 对应 type : 'circle'

12. 其他配置信息是指定类型坐标轴的配置信息

13. yAxis y轴坐标，配置信息类似于 xAxis,特别之处在于：

14. yAxis可以是数组，标示图表有多个y坐标轴，对应的图表序列 series里面配置 yAxis:1，即可

15. yTickCounts y轴坐标轴的坐标点的个数，决定显示的文本和栅格密度，这个值是一个数组类型，指定最小、最大个数，默认 ： [3,5]

16. xTickCounts x轴坐标轴的坐标个数，也是有个数组 ，默认 [5,10]

17. colors 颜色列表，多个图表序列时，每个图表序列的颜色依次自动赋值

18. tooltip 提示信息，详细信息参考tooltip

19. legend 图例，详细信息参考图例

20. series 图表序列的配置信息，是一个数组，每个对象代表一个图表序列,详细信息参考图表序列,详细文档，更多图表序列

21. 
    

22. type 标示图表序列的类型，例如 type : 'line' 代表 Series.Line; type : 'column' 代表Series.Column

其他配置信息参考 对应的数据类型

seriesOptions 图表序列统一的配置信息，多个同样的图表序列的配置信息可以一起配置

每种图表一种配置信息，例如 lineCfg 标示折线图 type : 'line' 的配置信息，columnCfg 标示柱状图的配置信息

如果仅有一种类型的配置信息，例如 seriesOptions : {columnCfg : {}}，默认所有series的类型为 column

theme 图表的皮肤，详细信息参考图表皮肤

只读属性

canvas 画布

方法

render() 渲染图表

on(eventName,fn) 绑定事件

off(eventName,fn) 解除事件绑定

get(name) 获取属性

set(name,value) 设置属性

getSeries() 返回所有的series

getSeriesByName(name) 获取指定名称的series

getXAxis(seriesName) 根据序列series的name返回对应的x坐标轴，如果不指定则取第一个序列的x坐标轴

getYAxis(seriesName) 根据序列series的name返回对应的y坐标轴，如果不指定则取第一个序列的y坐标轴

changeData(data) 更改数据，如果有多个序列则 data 是一个多维数组，data = [data1,data2...datan]

绑定事件

图表的事件绑定方式有多种方式：

直接在chart上绑定图表的事件，事件类型比较少，必须在图表上触发事件

配置项中配置对应元素的事件，例如可以在具体的某个 series里面配置series的事件

查找到对应的图形或者分组，绑定事件

直接在图表上绑定事件

图表支持的事件类型：

plotclick 图表边框内部的点击事件

ev.x 点击的x坐标

ev.y 点击的y坐标

ev.shape 点击的图形

plotmove 图表边框内部的移动事件

ev.x 移动到的x坐标

ev.y 移动到的y坐标

ev.shape 移动到的图形

plotover 进入图表的边框内部

ev.x 进入的x坐标

ev.y 进入的y坐标

ev.shape 移动到的图形

plotout 移出图表边框

seriesactived 图表序列激活，例如折线图激活

ev.series 图表序列

seriesunactived 图表序列取消激活

ev.series 图表序列

seriesitemclick 点击图表序列子项，例如饼图的一个子项（弧形）被点击

ev.series 图表序列

ev.seriesItem 图表序列子项

seriesitemselected 选中图表序列的一个子项，例如柱状图的一项被选中

ev.series 图表序列

ev.seriesItem 图表序列子项

seriesitemunselected 取消选中图表序列的一个子项

ev.series 图表序列

ev.seriesItem 图表序列子项

tooltipshow 提示信息显示

tooltiphide 提示信息隐藏

绑定事件的代码

chart.on('plotclick',function(ev){
  var shape = ev.shape;
  if(shape){
    //TO DO
  }
});

下载地址