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文档
相关推荐
SSM框架是Java后端开发的主流选择,它由Spring、Spring MVC和MyBatis三个组件构成,而Echarts是百度推出的一款强大的前端图表库。下面我们将深入探讨这些技术在实现数据展示中的关键知识点。 1. **Spring框架**:...
Jupyter-Notebook
考研公共课历年真题集-最新发布.zip
2006-2023年上市公司资产误定价Misp数据集(4.9万样本,含原始数据、代码及结果,最新).zip
Jupyter-Notebook
Jupyter-Notebook
100个Origin软件高效使用技巧大全-最新更新.zip
Jupyter-Notebook
煤矿感知数据联网接入规范 第2部分:重要设备
1、资源内容地址:https://blog.csdn.net/abc6838/article/details/143777985 2、数据特点:今年全新,手工精心整理,放心引用,数据来自权威,且标注《数据来源》,相对于其他人的控制变量数据准确很多,适合写论文做实证用 ,不会出现数据造假问题 3、适用对象:大学生,本科生,研究生小白可用,容易上手!!! 4、课程引用: 经济学,地理学,城市规划与城市研究,公共政策与管理,社会学,商业与管理
KSSJ_CJ15-2023
全国电子地图行政区划道路水系数据-最新shp.zip
1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。
全国乡镇级行政区划矢量数据2.0版-最新.zip
Jupyter-Notebook
Typora(version 1.2.3)导出 pdf 自定义水印的 frame.js 文件,详情可以查看:
【作品名称】:基于Java 实现的电脑鼠走迷宫的软件程序 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】: 迷宫地图生成算法的设计和实现 自动生成迷宫:根据迷宫生成算法自动生成一定复杂度的迷宫地图。 手动生成迷宫:根据文件中存储的固定数据生成迷宫地图。 单路径寻找算法的设计与实现:找出迷宫中一条单一的通路。 迷宫遍历算法的设计与实现:遍历迷宫中所有的可行路径。 最短路径计算算法的设计与实现:根据遍历结果,找出迷宫中所有通路中的最短通路。 (3)第二部分:界面展示部分 生成迷宫地图界面的设计与实现:根据生成的迷宫地图,用可视化的界面展现出来。 界面布局的设计与实现:根据迷宫程序的总体需求,设计和实现合理的界面布局。 相关迷宫生成过程和寻路算法在界面上的展现:将迷宫程序中的相关功能,跟界面合理结合,并采用一定的方法展 【资源声明】:本资源作为“参考资料”而不是“定制需求”,代码只能作为参考,不能完全复制照搬。需要有一定的基础看懂代码,自行调试代码并解决报错,能自行添加功能修改代码。
基于Selenium前端自动化测试工具,对youtube和tiktok数据进行爬虫,可设置自己要爬取的内容和主题,快速便捷。
Jupyter-Notebook
gkt