本篇教程介绍了JavaScript基础教程 功能齐全的图表库 ACharts，希望阅读本篇文章以后大家有所收获，帮助大家对JavaScript的理解更加深入。

<

ACharts是基于Raphael 库开发的，而Raphael.js是基于svg和vml语言，因此最低可以兼容到IE6+,而最高则所有支持w3c svg标准的现代浏览器都可以使用，svg甚至在手机平台也能有不错的表现。本项目是由某淘宝大神开发，目测是淘宝某大神开发的后台管理框架BUI中使用的图表库，功能完善，兼容性好，MIT协议，完全免费。。。    ACharts - javascript 图形组件,全面的图形库，折线图、柱状图、区域图、饼图以及各种其他类型图形,易于使用,方便扩展。
使用教程
引入cdn上的代码

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


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

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


　　
 
各种实例大全
图表的属性

id 图表渲染到的容器的id，必须
width 图表的宽度，如果设置forceFit :true,则自动计算宽度
height 图表的高度
data 图表的数据，如果此属性设置，series内部就不需要设置data
forceFit 图表宽度自适应，窗口发生改变时，图表宽度自适应
fitRatio 如果设置了forceFit 那么宽高的比例由此属性决定，默认0，不按照比例设置高度
plotCfg 图表的边框、背景设置，详细信息参考：图表背景，wiki
title 图表标题，设置null时不显示，是一个文本图形
subTitle 图表子标题，设置null时不显示，是一个文本图形
xAxis x轴坐标，对应 Axis类，更多坐标轴文档
type 标示坐标轴类型会转换成对应的坐标轴，例如 Axis.Number 对应 type : 'number';Axis.Circle 对应 type : 'circle'
其他配置信息是指定类型坐标轴的配置信息
yAxis y轴坐标，配置信息类似于 xAxis,特别之处在于：
yAxis可以是数组，标示图表有多个y坐标轴，对应的图表序列 series里面配置 yAxis:1，即可
yTickCounts y轴坐标轴的坐标点的个数，决定显示的文本和栅格密度，这个值是一个数组类型，指定最小、最大个数，默认 ： [3,5]
xTickCounts x轴坐标轴的坐标个数，也是有个数组 ，默认 [5,10]
colors 颜色列表，多个图表序列时，每个图表序列的颜色依次自动赋值
tooltip 提示信息，详细信息参考tooltip
legend 图例，详细信息参考图例
series 图表序列的配置信息，是一个数组，每个对象代表一个图表序列,详细信息参考图表序列,详细文档，更多图表序列
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
});
 
   

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端JavaScript频道！