功能齐全的图表库 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
各种实例大全
图表的属性
- 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
});
ACharts API文档
功能齐全的图表库 ACharts的更多相关文章
- 11个很棒的 jQuery 图表库
如果你曾经使用过任何类型的数据,你应该知道阅读一排排数据的痛苦.通过所有这些数据弄清楚他们的意思是非常不容易的.可视化对于解决这个问题起到了重要的作用.可视化降低了数据阅读的难度,帮助决策者获得可操作 ...
- 个人永久性免费-Excel催化剂功能第69波-专业图表库新增图表-刘万祥老师中国地图
Excel催化剂的[专业图表库],仅提供一个工具的输出,让用户可以在制作专业图表过程中更低的门槛,更快速的完成所想要实现的图表.具体参考:第69波-打造最专业易用的商务图表库https://www.j ...
- 个人永久性免费-Excel催化剂功能第69波-打造最专业易用的商务图表库,即点即用的高级Excel图表
Excel很大一块细分领域是图表,数据分析的末端,数据展示环节,精美恰当的图表,能够为数据分析数据结论带来画龙点睛的一笔.Excel催化剂简单内置了图表库,利用已经做好的模板式的图表示例,可快速复制使 ...
- iOS图表库Charts集成与使用
Charts是一个很优秀的图表库,它支持Android.iOS.tvOS和macOS,这样使用起来,可以节省学习成本,可以从GitHub上了解更多信息.本文记录在iOS项目上的集成与使用. Chart ...
- ECharts-基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表
ECharts http://ecomfe.github.com/echarts 基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算 ...
- Framework7 – 赞!功能齐全的 iOS7 App 前端框架
Framework7 是一个功能很全的 HTML 框架,用来构建 iOS7 应用程序. Framework7 允许您灵活搭建列表视图(表视图) .你可以让他们作为导航菜单,你可以在列表里面使用图标,输 ...
- chart.js图表库案例赏析,饼图添加文字
chart.js图表库案例赏析,饼图添加文字 Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图, ...
- highCharts入门-强大的图表库插件
简介 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业 ...
- highcharts 图表库的简单使用
Highcharts简介: Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图.曲线图.面积图 ...
随机推荐
- gulp的使用
一.简介 gulp是一款前端构建工具,是和grunt很类似的一款构建工具,但是相比grunt来说,gulp更轻量级,配置和使用更简单,命令更少,更容易学习和记住. 二.具体的使用 安装gulp: np ...
- nodemailer实现node发送邮件
作为一个前端er,利用node独立做一些全栈小项目,是很有效率和必要的. 需要: 做一个活动报名页面,用户填好的表单需要被工作人员收到,一想到把数据存数据库,还需要给工作人员写一个管理页面就觉得很麻烦 ...
- Network - DNS
珠玉在前,不再赘言 DNS 原理入门 从理论到实践,全方位认识DNS(理论篇) 从理论到实践,全方位认识DNS(实践篇)
- 安装thrift
要求 thrift至少需要支持三种语言: Java PHP Go 预安装 基本教程: http://thrift.apache.org/docs/install/centos 使用最新的thrift, ...
- 基于HTML5的WebGL设计汉诺塔3D游戏
在这里我们将构造一个基于HT for Web的HTML5+JavaScript来实现汉诺塔游戏. http://hightopo.com/demo/hanoi_20151106/index.html ...
- 【转】ASP.NET"正在中止线程"错误原因
最近做的系统中老出现的一些问题不太明白,在使用 Response.End.Response.Redirect 或 Server.Transfer 时出现 ThreadAbortException , ...
- JavaScript星形评分
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- [Android] 环境配置之正式版Android Studio 1.0
昨天看见 Android Studio 1.0 正式版本发布了:心里挺高兴的. 算是忠实用户了吧,从去年开发者大会一开始出现 AS 后就开始使用了:也是从那时开始就基本没有用过 Eclipse 了:一 ...
- QTableWidget 使用及美化_QtableWidget_QtableView滚动条宽度及样式
//创建及属性设置m_tableWidget = new QTableWidget(this);m_tableWidget->setRowCount(10);m_tableWidget-&g ...
- C#的变迁史 - C# 4.0篇
C# 4.0 (.NET 4.0, VS2010) 第四代C#借鉴了动态语言的特性,搞出了动态语言运行时,真的是全面向“高大上”靠齐啊. 1. DLR动态语言运行时 C#作为静态语言,它需要编译以后运 ...