功能齐全的图表库 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目前支持直线图.曲线图.面积图 ...
随机推荐
- TSQL HASHBYTES 用法
HashBytes 使用Hash 算法,能够产生高质量的Hash值,大幅度提高识别数据相异的准确性,但是HashBytes函数无法提供100%的准确度,如果业务逻辑要求不允许有误差,那么不要使用任何H ...
- js对象、数组转换字符串
对象转换成字符串需要使用toString()方法. 1 var a = function(){ 2 console.log(111); 3 }; 4 var b = a.toString(); 5 c ...
- Codeforces Round #277(Div. 2) (A Calculating Function, B OR in Matrix, C Palindrome Transformation)
#include<iostream> #include<cstring> #include<cstdio> /* 题意:计算f(n) = -1 + 2 -3 +4. ...
- vc++用ADO方式连接oracle问题
今天装了个oracle客户端,准备写个访问远程oracle的程序.用的是vs2010,采用ADO的连接方法连接oracle,结果运行的时候总是报下面的错: 从提示可以看出是没有找到OraOLEDBup ...
- MYSQL线程池总结(一)
线程池是Mysql5.6的一个核心功能,对于服务器应用而言,无论是web应用服务还是DB服务,高并发请求始终是一个绕不开的话题.当有大量请求并发访问时,一定伴随着资源的不断创建和释放,导致资源利用率低 ...
- Java多线程系列--“JUC集合”08之 LinkedBlockingQueue
概要 本章介绍JUC包中的LinkedBlockingQueue.内容包括:LinkedBlockingQueue介绍LinkedBlockingQueue原理和数据结构LinkedBlockingQ ...
- 微信内置浏览器WebApp开发,踩坑 · Issue #31 · maxzhang/maxzhang.github.com · GitHub
最近花6天时间完成了一个七夕的小活动,是一个简单的WebApp.由于我前期对面向微信的Web开发评估不足,导致开发过程十分艰难.写这篇文章总结下,惊醒自己未来不要再犯这样的错误. 问题: 1. 有些比 ...
- expdp/impdp 参数说明,中英对照
任意可以使用expdp/impdp的环境,都可以通过help=y看到帮助文档. 1.expdp参数说明 2.impdp参数说明 3.expdp参数说明(中文) 4.impdp参数说明(中文) 1.ex ...
- [git]撤销的相关命令:reset、revert、checkout
基本概念 工作区 暂存区 本地版本仓库 远程版本仓库 如果不清晰上面的四个概念,请查看廖老师的git教程 这里我多说几句:最开始我使用git的时候,我并不明白我为什么写完代码要用git的一些列指令把我 ...
- CSS魔法堂:重新认识Box Model、IFC、BFC和Collapsing margins
前言 盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日 ...