`

功能齐全的图表库 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. type 标示图表序列的类型,例如 type : 'line' 代表 Series.Line; type : 'column' 代表Series.Column
  22. 其他配置信息参考 对应的数据类型
  23. seriesOptions 图表序列统一的配置信息,多个同样的图表序列的配置信息可以一起配置
  24. 每种图表一种配置信息,例如 lineCfg 标示折线图 type : 'line' 的配置信息,columnCfg 标示柱状图的配置信息
  25. 如果仅有一种类型的配置信息,例如 seriesOptions : {columnCfg : {}},默认所有series的类型为 column
  26. theme 图表的皮肤,详细信息参考图表皮肤

canvas 画布

方法

  1. render() 渲染图表
  2. on(eventName,fn) 绑定事件
  3. off(eventName,fn) 解除事件绑定
  4. get(name) 获取属性
  5. set(name,value) 设置属性
  6. getSeries() 返回所有的series
  7. getSeriesByName(name) 获取指定名称的series
  8. getXAxis(seriesName) 根据序列series的name返回对应的x坐标轴,如果不指定则取第一个序列的x坐标轴
  9. getYAxis(seriesName) 根据序列series的name返回对应的y坐标轴,如果不指定则取第一个序列的y坐标轴
  10. 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文档

各种实例大全

 

在线文档

 

1
1
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    SSM+Echarts+Mysql实现的从数据库获取数据展示图表

    SSM框架是Java后端开发的主流选择,它由Spring、Spring MVC和MyBatis三个组件构成,而Echarts是百度推出的一款强大的前端图表库。下面我们将深入探讨这些技术在实现数据展示中的关键知识点。 1. **Spring框架**:...

    基于servlet+jsp+mysql实现的影视管理系统课程设计

    【作品名称】:基于servlet+jsp+mysql实现的影视管理系统【课程设计】 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】: 基于servlet+jsp+mysql实现的影视管理系统【课程设计】 基于servlet+jsp+mysql实现的影视管理系统【课程设计】 Java Web课程设计,基于servlet+jsp+ajax+mysql做的影视管理系统 运行环境: Tomcat 9.0 JDK 1.8 MySQL 8.0 后台管理账号密码均为:root,项目依赖:lib 目录 【资源声明】:本资源作为“参考资料”而不是“定制需求”,代码只能作为参考,不能完全复制照搬。需要有一定的基础看懂代码,自行调试代码并解决报错,能自行添加功能修改代码。

    kernel-5.15-ky10-x86.tar.gz

    kernel-5.15-ky10-x86.tar.gz

    基于AT89C51 单片机为核心器件,程序设计采用C 语言,Keil 软件编译程序,配以相关外围接口电路,实现了方波、锯齿波、正弦波、三角波、梯形波五种特定波形的产生【论文+源码】

    【作品名称】:基于AT89C51 单片机为核心器件,程序设计采用C 语言,Keil 软件编译程序,配以相关外围接口电路,实现了方波、锯齿波、正弦波、三角波、梯形波五种特定波形的产生【论文+源码】 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】:本设计中的波形发生器系统要求基于51单片机,因此选用以AT89C51单片机作为整个系统的控制核心,应用其强大的接口功能,构成整个波形发生器的硬件系统。使用C 语言对单片机编程可产生相应的正弦波,方波,三角波,锯齿波梯形波波形信号。在程序运行时,当接收到按键信息后,需要输出某种波形时,调用相应的中断服务子程序和波形发生程序,经电路的数/模转换器和运算放大器处理后,从信号发生器的输出端口输出即可得到要求的波形。 当需要改变频率时只需要改变单片机的波形发生程序中的递增或者递减变量即可。 【资源声明】:本资源作为“参考资料”而不是“定制需求”,代码只能作为参考,不能完全复制照搬。需要有一定的基础看懂代码,自行调试代码并解决报错,能自行添加功能修改代码。

    基于java的法律咨询系统设计与实现.docx

    基于java的法律咨询系统设计与实现.docx

    适用于元营销 API 的 Python SDK.zip

    适用于元营销 API 的 Python SDK适用于 Python 的 Facebook Business SDK 介绍Facebook Business SDK是一站式服务,可帮助我们的合作伙伴更好地服务于他们的业务。合作伙伴正在使用多个 Facebook API 来满足其客户的需求。采用所有这些 API 并在各个平台上保持最新状态可能非常耗时,而且最终会造成高昂的成本。为此,Facebook 开发了 Business SDK,将其许多 API 捆绑到一个 SDK 中,以简化实施和维护。Business SDK 是 Marketing API SDK 的升级版,其中包括 Marketing API 以及来自不同平台(如 Pages、Business Manager、Instagram 等)的许多 Facebook API。快速入门商业SDK入门指南Python 目前是我们第三方开发人员最常用的语言。是一个 Python 包,它提供了您的 Python 应用程序与Business SDK 内的 Facebook APIfacebook_business之间的

    数学建模培训资料 数学建模实战题目真题答案解析解题过程&论文报告 公交车调度的运作数学模型 共12页.pdf

    数学建模培训资料 数学建模实战题目真题答案解析解题过程&论文报告 公交车调度的运作数学模型 共12页.pdf

    基于smart-socket实现的轻量级http服务器

    smart-http 是一款可编程的 Http 应用微内核,方便用户根据自身需求进行 Server 或 Client 的应用开发。支持GET、POST的 HTTP 请求。提供了 URL 路由组件,可以快速搭建一套静态服务器。支持部分 RFC2612 规范,后续会逐渐完善。支持 Https 协议,由 smart-socket 为其赋能。具备文件上传的能力。支持 websocket、Cookie支持 Server、Client 开发

    新闻资讯系统 微信小程序+SpringBoot毕业设计 源码+数据库+论文+启动教程.zip

    新闻资讯系统 微信小程序+SpringBoot毕业设计 源码+数据库+论文+启动教程 项目启动教程:https://www.bilibili.com/video/BV1oiBpYcEBp

    高校师生工作室-JAVA-基于微信小程序的高校师生工作室管理系统的设计与实现

    高校师生工作室-JAVA-基于微信小程序的高校师生工作室管理系统的设计与实现

    基于java的常见小儿疾病中医护理系统设计与实现.docx

    基于java的常见小儿疾病中医护理系统设计与实现.docx

    本教程播放列表涵盖了 Python 中的数据结构和算法 每个教程都有数据结构或算法背后的理论、BIG O 复杂性分析和可供练习的练习 .zip

    本教程播放列表涵盖了 Python 中的数据结构和算法。每个教程都有数据结构或算法背后的理论、BIG O 复杂性分析和可供练习的练习。使用 Python 的数据结构和算法本教程涵盖了 Python 中的数据结构和算法。每个教程都包含数据结构或算法背后的理论、BIG O 复杂度分析以及可供练习的练习。要观看视频,您可以访问播放列表https://www.youtube.com/playlist?list=PLeo1K3hjS3uu_n_a__MI_KktGTLYopZ12订阅 codebasics youtube 频道https://www.youtube.com/c/codebasics

    数学建模学习资料 蒙特卡罗方法课件教程 第2章.随机数 共29页.pptx

    数学建模学习资料 蒙特卡罗方法课件教程 第2章.随机数 共29页.pptx

    python实现基于CNN网络的新闻数据集文本分类源码+数据集(Python期末大作业)

    python实现基于CNN网络的新闻数据集文本分类源码+数据集(Python期末大作业),个人大三学期的期末大作业、经导师指导并认可通过的高分大作业设计项目,评审分98分。主要针对计算机相关专业的正在做大作业的学生和需要项目实战练习的学习者,可作为课程设计、期末大作业。 python实现基于CNN网络的新闻数据集文本分类源码+数据集(Python期末大作业)python实现基于CNN网络的新闻数据集文本分类源码+数据集(Python期末大作业),个人大三学期的期末大作业、经导师指导并认可通过的高分大作业设计项目,评审分98分。主要针对计算机相关专业的正在做大作业的学生和需要项目实战练习的学习者,可作为课程设计、期末大作业。python实现基于CNN网络的新闻数据集文本分类源码+数据集(Python期末大作业),个人大三学期的期末大作业、经导师指导并认可通过的高分大作业设计项目,评审分98分。主要针对计算机相关专业的正在做大作业的学生和需要项目实战练习的学习者,可作为课程设计、期末大作业。python实现基于CNN网络的新闻数据集文本分类源码+数据集(Python期末大作业),个人大

    中小学知识产权教育试点学校申报表.doc

    中小学知识产权教育试点学校申报表.doc

    基于django的音乐推荐系统.zip

    基于django的音乐推荐系统.zip

    在建工程涉及专项行动情况检查表.docx

    在建工程涉及专项行动情况检查表.docx

    毕设源码-python-django基于python技术的学生管理系统的设计与开发-期末大作业+说明文档.rar

    本项目是一个基于Python技术的学生管理系统,采用Django框架进行开发,旨在为计算机相关专业的学生提供一个实践性强、功能全面的管理系统,以帮助他们完成毕业设计或进行项目实战练习。 系统实现了对学生信息、课程信息、成绩、考勤等多方面的管理功能。学生信息管理包括学生基本信息的增删改查;课程信息管理允许管理员设置课程信息,包括课程名称、授课老师、学分等;成绩管理功能使学生和教师能够录入、查看和修改成绩;考勤管理则方便教师记录学生的出勤情况。 该项目采用B/S架构,前端使用HTML、CSS、JavaScript等技术,后端使用Python语言和Django框架,数据库采用MySQL。Django框架提供了强大的后台管理功能,使得系统管理更加便捷。 通过开发这个项目,学生不仅能提升自己的编程能力,还能学习到如何构建一个实际应用的系统,对于即将步入职场的学生来说,具有很高的实用价值。

    适用于 Python 的 Splunk 软件开发工具包.zip

    适用于 Python 的 Splunk 软件开发工具包参考文档适用于 Python 的 Splunk Enterprise 软件开发工具包版本 2.1.0适用于 Python 的 Splunk Enterprise 软件开发套件 (SDK) 包含库代码,旨在使开发人员能够使用 Splunk 平台构建应用程序。Splunk 平台是一个搜索引擎和分析环境,它使用分布式 map-reduce 架构来有效地索引、搜索和处理大型时变数据集。Splunk 平台深受系统管理员的欢迎,用于聚合和监控 IT 机器数据、安全性、合规性以及各种其他场景,这些场景都需要有效地从大量时间序列数据中索引、搜索、分析和生成实时通知。Splunk 开发者平台使开发人员能够利用 Splunk 平台所使用的相同技术来构建令人兴奋的新应用程序。开始使用 Python 版 Splunk SDK开始使用 Python 版 Splunk Enterprise SDKSplunk Enterprise SDK for Python 包含库代码,其示例位于splunk-app-examples存储库

    分布式事务练习.zip

    分布式事务练习

Global site tag (gtag.js) - Google Analytics