`

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

    基于Qt开发的截图工具- 支持全屏截图, 支持自定义截图,支持捕获窗口截图,支持固定大小窗口截图,颜色拾取,图片编辑

    基于Qt开发的截图工具.zip 截图工具(QScreenShot) Qt编写的一款截图工具。 特点 - 支持全屏截图 - 支持自定义截图 - 支持捕获窗口截图 - 支持固定大小窗口截图 - 颜色拾取 - 图片编辑 - 图片上传到wordpress 环境 Qt6.2 QtCreate 8

    毕业设计&课设_ 校园活动管理系统,优化校园活动组织流程,涵盖多方面功能模块的便捷平台.zip

    该资源内项目源码是个人的课程设计、毕业设计,代码都测试ok,都是运行成功后才上传资源,答辩评审平均分达到96分,放心下载使用! ## 项目备注 1、该资源内项目代码都经过严格测试运行成功才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。

    毕业设计基于ASP.NET技术的班级展示网站构建(源代码+论文).zip

    基于ASP.NET技术的班级展示网站构建资源,是一套针对教育机构或学生团体,旨在通过ASP.NET框架开发班级风采展示平台的指导资料或教程。此资源详细介绍了如何利用ASP.NET的强大功能,快速搭建一个功能完善、界面友好的在线班级展示平台。 该资源涵盖了从需求分析、数据库设计、前端页面制作到后端逻辑实现的全过程。通过实例演示,指导用户如何设置班级信息、学生风采展示、活动公告、图片上传与浏览等核心功能模块。同时,结合ASP.NET的MVC架构,实现了前后端分离,提高了代码的可维护性和可扩展性。 此外,该资源还提供了丰富的代码示例和注释,帮助开发者深入理解ASP.NET框架的工作原理,掌握如何运用其强大的数据库操作、用户认证与授权等特性。对于初学者来说,这是一份难得的入门教程;而对于有一定经验的开发者,则是一份提升技能的参考资料。 总之,基于ASP.NET技术的班级展示网站构建资源,是教育机构和学生团体实现班级风采在线展示的理想选择,也是开发者学习ASP.NET框架应用的宝贵资源。

    基于springboot的流浪动物管理系统源码数据库文档.zip

    基于springboot的流浪动物管理系统源码数据库文档.zip

    基于springboot+vue的实践性教学系统源码数据库文档.zip

    基于springboot+vue的实践性教学系统源码数据库文档.zip

    基于Python+Django家居全屋定制系统源码数据库文档.zip

    基于Python+Django家居全屋定制系统源码数据库文档.zip

    Umi-OCR-main.zip

    Umi-OCR-main.zip

    基于springboot复兴村医疗管理系统源码数据库文档.zip

    基于springboot复兴村医疗管理系统源码数据库文档.zip

    基于springboot二手物品交易系统源码数据库文档.zip

    基于springboot二手物品交易系统源码数据库文档.zip

    2024年西安外事学院数学建模校赛题目.zip

    2024年西安外事学院数学建模校赛题目.zip

    基于springboot医疗废物管理系统源码数据库文档.zip

    基于springboot医疗废物管理系统源码数据库文档.zip

    colormaps.ipynb

    GEE训练教程

    Spring Boot设计实战:从入门到精通的语言教程、实战案例与项目资源

    内容概要:本文详细介绍了Spring Boot的设计和应用,涵盖了从基本概念到高级用法的全方位教学。首先通过环境搭建、首个项目创建、核心概念解析等步骤帮助读者快速上手。接着阐述了Spring Boot的设计原则与最佳实践,强调代码整洁和系统可维护性。最后,提供了两个实战案例:构建简单的RESTful API和电商网站后台管理系统,涉及项目结构、依赖配置、数据库设计、实体类与控制器的创建等内容,指导读者进行真实项目的开发。 适合人群:适合初学者到中级开发者的Java开发人员,尤其是对企业级应用开发感兴趣的人士。 使用场景及目标:①帮助开发者全面掌握Spring Boot的基本用法及其设计理念;②提供实用的实战案例和资源,使读者能够在实际项目中熟练应用Spring Boot技术。 阅读建议:跟随文章提供的步骤逐步操作,并结合实际开发需求灵活运用所学知识。建议多动手练习,加强对Spring Boot的理解和掌握。

    毕业设计&课设_基于 SSM 的城市公交查询系统,含多种信息及数据库脚本.zip

    该资源内项目源码是个人的课程设计、毕业设计,代码都测试ok,都是运行成功后才上传资源,答辩评审平均分达到96分,放心下载使用! ## 项目备注 1、该资源内项目代码都经过严格测试运行成功才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。

    课程考试系统设计与开发:从理论到实践的全方位指南

    内容概要:本文详细介绍了一个课程考试系统的设计与开发过程,涵盖语言教程、实战案例和项目资源。主要内容包括:选择Java作为开发语言,详细讲解Java基础语法和Web开发基础;实战案例包括用户管理、课程管理和考试管理模块的实现;提供了项目结构、数据库设计和依赖管理的详细示例。 适合人群:适用于初学者和有一定经验的开发者,希望通过实际项目掌握课程考试系统的设计与开发。 使用场景及目标:帮助学习者全面提升从理论到实践的能力,最终能够独立完成一个完整的课程考试系统。无论是学习编程基础还是进阶实战,本文都提供了全面的指导。 其他说明:项目涉及多个关键技术和知识点,如Servlet、JSP、JDBC、MVC模式等,有助于深入理解和应用这些技术。此外,还包括项目部署和运行的具体步骤,方便学习者快速搭建和测试系统。

    《伯牙鼓琴》教学课件.pptx

    《伯牙鼓琴》教学课件.pptx

    基于springboot面向社区的智能化健康管理系统研究源码数据库文档.zip

    基于springboot面向社区的智能化健康管理系统研究源码数据库文档.zip

    基于springboot+javaweb宿舍管理系统源码数据库文档.zip

    基于springboot+javaweb宿舍管理系统源码数据库文档.zip

    基于SpringBoot的遥感影像共享系统源码数据库文档.zip

    基于SpringBoot的遥感影像共享系统源码数据库文档.zip

Global site tag (gtag.js) - Google Analytics