`

功能齐全的图表库 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框架**:...

    数据库基础测验20241113.doc

    数据库基础测验20241113.doc

    微信小程序下拉选择组件

    微信小程序下拉选择组件

    DICOM文件+DX放射平片-数字X射线图像DICOM测试文件

    DICOM文件+DX放射平片—数字X射线图像DICOM测试文件,文件为.dcm类型DICOM图像文件文件,仅供需要了解DICOM或相关DICOM开发的技术人员当作测试数据或研究使用,请勿用于非法用途。

    Jupyter Notebook《基于双流 Faster R-CNN 网络的 图像篡改检测》+项目源码+文档说明+代码注释

    <项目介绍> - 基于双流 Faster R-CNN 网络的 图像篡改检测 - 不懂运行,下载完可以私聊问,可远程教学 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。 --------

    使用epf捕获没有CA证书的SSLTLS明文(LinuxAndroid内核支持amd64arm64).zip

    c语言

    (源码)基于Arduino的天文数据库管理系统.zip

    # 基于Arduino的天文数据库管理系统 ## 项目简介 本项目是一个基于Arduino的天文数据库管理系统,旨在为Arduino设备提供一个完整的天文数据库,包括星星、星系、星团等天体数据。项目支持多种语言的星座名称,并提供了详细的天体信息,如赤道坐标、视星等。 ## 项目的主要特性和功能 星座目录包含88个星座,提供拉丁语、英语和法语的缩写和全名。 恒星目录包含494颗亮度达到4等的恒星。 梅西耶目录包含110个梅西耶天体。 NGC目录包含3993个NGC天体,亮度达到14等。 IC目录包含401个IC天体,亮度达到14等。 天体信息每个天体(不包括星座)提供名称、命名、相关星座、赤道坐标(J2000)和视星等信息。 恒星额外信息对于恒星,还提供每年在赤经和赤纬上的漂移以及视差。 ## 安装使用步骤 1. 安装库使用Arduino IDE的库管理器安装本项目的库。 2. 解压数据库将db.zip解压到SD卡中。

    (源码)基于JSP和SQL Server的维修管理系统.zip

    # 基于JSP和SQL Server的维修管理系统 ## 项目简介 本项目是一个基于JSP和SQL Server的维修管理系统,旨在提供一个高效、便捷的维修管理解决方案。系统涵盖了从维修订单的创建、管理到配件的录入、更新等多个功能模块,适用于各类维修服务行业。 ## 项目的主要特性和功能 1. 用户管理 管理员和客户的注册与登录。 管理员信息的管理与更新。 客户信息的创建、查询与更新。 2. 维修订单管理 维修订单的创建、查询与更新。 维修回执单的创建与管理。 3. 配件管理 配件信息的录入与更新。 配件库存的管理与查询。 4. 评价与反馈 客户对维修服务的评价记录。 系统反馈信息的收集与管理。 5. 数据加密与安全 使用MD5加密算法对用户密码进行加密存储。 通过过滤器实现登录验证,确保系统安全。 ## 安装使用步骤

    devecostudio-windows-3.1.0.501.zip

    HUAWEI DevEco Studio,以下简称DevEco Studio)是基于IntelliJ IDEA Community开源版本打造,为运行在HarmonyOS和OpenHarmony系统上的应用和服务(以下简称应用/服务)提供一站式的开发平台。 作为一款开发工具,除了具有基本的代码开发、编译构建及调测等功能外,DevEco Studio还具有如下特点: - 高效智能代码编辑:支持ArkTS、JS、C/C++等语言的代码高亮、代码智能补齐、代码错误检查、代码自动跳转、代码格式化、代码查找等功能,提升代码编写效率。更多详细信息,请参考[编辑器使用技巧] - 低代码可视化开发:丰富的UI界面编辑能力,支持自由拖拽组件和可视化数据绑定,可快速预览效果

    《计算机视觉技术》实验报告-8.1提取车辆轮廓

    《计算机视觉技术》实验报告-8.1提取车辆轮廓

    springboot小徐影城管理系统(代码+数据库+LW)

    随着现在网络的快速发展,网上管理系统也逐渐快速发展起来,网上管理模式很快融入到了许多生活之中,随之就产生了“小徐影城管理系统”,这样就让小徐影城管理系统更加方便简单。 对于本小徐影城管理系统的设计来说,系统开发主要是采用java语言技术,在整个系统的设计中应用MySQL数据库来完成数据存储,具体根据小徐影城管理系统的现状来进行开发的,具体根据现实的需求来实现小徐影城管理系统网络化的管理,各类信息有序地进行存储,进入小徐影城管理系统页面之后,方可开始操作主控界面,主要功能包括管理员:首页、个人中心、用户管理、电影类型管理、放映厅管理、电影信息管理、购票统计管理、系统管理、订单管理,用户前台;首页、电影信息、电影资讯、个人中心、后台管理、在线客服等功能。 本论文主要讲述了小徐影城管理系统开发背景,该系统它主要是对需求分析和功能需求做了介绍,并且对系统做了详细的测试和总结。具体从业务流程、数据库设计和系统结构等多方面的问题。望能利用先进的计算机技术和网络技术来改变目前的小徐影城管理系统状况,提高管理效率。

    C++与Matlab实现SIFT特征提取算法+项目源码+文档说明+代码注释

    <项目介绍> - SIFT特征提取算法C++与Matlab实现 - 不懂运行,下载完可以私聊问,可远程教学 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。 --------

    (1991-2024年)国家自然、社科基金部分名单(含部分标书)(最新!!!)

    数据介绍 数据名称:国家自然、社科基金部分名单 数据年份:1991-2024年 样本数量:10万+ 数据格式:PDF、excel

    卓晴-信号与系统课件.pdf

    卓晴

    as-bundled-clients

    as-bundled-clients

    学习时最后的资料包括面试等信息

    学习时最后的资料包括面试等信息

    (源码)基于Spring Boot和Ant Design的雨选课系统.zip

    # 基于Spring Boot和Ant Design的雨选课系统 ## 项目简介 雨选课系统是一个基于Spring Boot和Ant Design框架构建的前后端分离的选课系统。该系统实现了学生选课、成绩查询、教师成绩修改、课程编辑、课程新增等功能。登录信息使用Redis存储,并支持课程图片的上传功能。 ## 项目的主要特性和功能 1. 用户登录与权限管理 学生、教师和管理员分别有不同的登录权限。 登录信息使用Redis进行存储。 2. 课程管理 学生可以查看可选课程列表,并进行选课和退选操作。 教师可以查看自己教授的课程,并修改学生成绩。 管理员可以编辑和新增课程。 3. 成绩管理 学生可以查询自己的成绩。 教师可以修改学生的成绩。 4. 图片上传 支持课程图片的上传和展示。 5. 日志记录 系统记录请求和响应的日志信息,便于问题追踪和性能分析。

    数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目)

    数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目),含有代码注释,满分大作业资源,新手也可看懂,期末大作业、课程设计、高分必看,下载下来,简单部署,就可以使用。该项目可以作为课程设计期末大作业使用,该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目)数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目)数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目)数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目)数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目)数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目)数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目)数据库期末作业基于Python+mysql的餐厅

    江苏镇江两座小桥的技术状况评估与维修建议

    内容概要:本文针对镇江市丹徒区辛丰镇的两座小型桥梁(大叶二组滚水坝桥与东联组桥)进行了详细的技术状况评定和现状调查。主要内容包括:桥梁的基本参数描述、桥梁各部分的具体检查结果以及存在的具体病害及其原因分析,同时依据《公路桥梁技术状况评定标准》对每座桥梁分别给出了综合评分和技术状况等级,并提出了具体的维护与修复建议。大叶二组滚水坝桥技术状况良好(2类),但需要解决桥面铺装裂缝和桥墩的混凝土剥落问题;而东联组桥则需重点关注桥面施工不完整及护栏损坏等问题。 适用人群:桥梁管理人员、维护工作人员及城市基础设施规划相关人员。 使用场景及目标:适用于中小跨度桥梁的常规检查与维修决策制定过程中,旨在帮助专业人士快速掌握桥梁的实际状态,确保桥梁安全可靠运行。 其他说明:文中附有多张实拍图片用于直观展示桥梁现状及存在问题。

    基于套接字API开发的高性能高稳定性跨平台MQTT客户端,可以在嵌入式设备FreeRTOS LiteOS RTThre.zip

    c语言

Global site tag (gtag.js) - Google Analytics