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框架**:...
deepseek最新资讯、配置方法、使用技巧,持续更新中
Heric拓扑并网离网仿真模型:PR单环控制,SogIPLL锁相环及LCL滤波器共模电流抑制技术解析,基于Heric拓扑的离网并网仿真模型研究与应用分析:PR单环控制与Sogipll锁相环的共模电流抑制效能,#Heric拓扑并离网仿真模型(plecs) 逆变器拓扑为:heric拓扑。 仿真说明: 1.离网时支持非单位功率因数负载。 2.并网时支持功率因数调节。 3.具有共模电流抑制能力(共模电压稳定在Udc 2)。 此外,采用PR单环控制,具有sogipll锁相环,lcl滤波器。 注:(V0004) Plecs版本4.7.3及以上 ,Heric拓扑; 离网仿真; 并网仿真; 非单位功率因数负载; 功率因数调节; 共模电流抑制; 共模电压稳定; PR单环控制; sogipll锁相环; lcl滤波器; Plecs版本4.7.3及以上,Heric拓扑:离网并网仿真模型,支持非单位功率因数与共模电流抑制
2024免费微信小程序毕业设计成品,包括源码+数据库+往届论文资料,附带启动教程和安装包。 启动教程:https://www.bilibili.com/video/BV1BfB2YYEnS 讲解视频:https://www.bilibili.com/video/BV1BVKMeZEYr 技术栈:Uniapp+Vue.js+SpringBoot+MySQL。 开发工具:Idea+VSCode+微信开发者工具。
基于SMIC 40nm工艺库的先进芯片技术,SMIC 40nm工艺库技术细节揭秘:引领半导体产业新革命,smic40nm工艺库 ,smic40nm; 工艺库; 芯片制造; 纳米技术,SMIC 40nm工艺库:领先技术驱动的集成电路设计基础
2013年上半年软件设计师上午题-真题及答案解析
shp格式,可直接导入arcgis使用
ROS下的移动机器人路径规划算法:基于强化学习算法DQN、DDPG、SAC及TD3的实践与应用,ROS系统中基于强化学习算法的移动机器人路径规划策略研究:应用DQN、DDPG、SAC及TD3算法,ROS下的移动机器人路径规划算法,使用的是 强化学习算法 DQN DDPG SAC TD3等 ,ROS; 移动机器人; 路径规划算法; DQN; DDPG; SAC; TD3,ROS强化学习移动机器人路径规划算法研究
粒子群优化算法精准辨识锂电池二阶RC模型参数:高仿真精度下的SOC估计铺垫,粒子群优化算法精准辨识锂电池二阶RC模型参数:仿真验证与SOC估计铺垫,使用粒子群优化算法(PSO)辨识锂电池二阶RC模型参数(附MATLAB代码) 使用粒子群优化算法来辨识锂离子电池二阶RC模型的参数。 将粒子群优化算法寻找到的最优参数代入二阶RC模型进行仿真,经过验证,端电压的估计误差小于0.1%,说明粒子群优化算法辨识得到的参数具有较高的精度,为锂离子电池SOC的估计做铺垫。 ,关键词:粒子群优化算法(PSO); 锂电池二阶RC模型参数辨识; MATLAB代码; 端电压估计误差; 锂离子电池SOC估计。,PSO算法优化锂电池二阶RC模型参数:高精度仿真与MATLAB代码实现
selenium环境搭建-谷歌浏览器驱动
在当今科技日新月异的时代,智慧社区的概念正悄然改变着我们的生活方式。它不仅仅是一个居住的空间,更是一个集成了先进科技、便捷服务与人文关怀的综合性生态系统。以下是对智慧社区整体解决方案的精炼融合,旨在展现其知识性、趣味性与吸引力。 一、智慧社区的科技魅力 智慧社区以智能化设备为核心,通过综合运用物联网、大数据、云计算等技术,实现了社区管理的智能化与高效化。门禁系统采用面部识别技术,让居民无需手动操作即可轻松进出;停车管理智能化,不仅提高了停车效率,还大大减少了找车位的烦恼。同时,安防报警系统能够实时监测家中安全状况,一旦有异常情况,立即联动物业进行处理。此外,智能家居系统更是将便捷性发挥到了极致,通过手机APP即可远程控制家中的灯光、窗帘、空调等设备,让居民随时随地享受舒适生活。 视频监控与可视对讲系统的结合,不仅提升了社区的安全系数,还让居民能够实时查看家中情况,与访客进行视频通话,大大增强了居住的安心感。而电子巡更、公共广播等系统的运用,则进一步保障了社区的治安稳定与信息传递的及时性。这些智能化设备的集成运用,不仅提高了社区的管理效率,更让居民感受到了科技带来的便捷与舒适。 二、智慧社区的增值服务与人文关怀 智慧社区不仅仅关注科技的运用,更注重为居民提供多元化的增值服务与人文关怀。社区内设有互动LED像素灯、顶层花园控制喷泉等创意设施,不仅美化了社区环境,还增强了居民的归属感与幸福感。同时,社区还提供了智能家居的可选追加项,如空气净化器、远程监控摄像机等,让居民能够根据自己的需求进行个性化选择。 智慧社区还充分利用大数据技术,对居民的行为数据进行收集与分析,为居民提供精准化的营销服务。无论是周边的商业信息推送,还是个性化的生活建议,都能让居民感受到社区的智慧与贴心。此外,社区还注重培养居民的环保意识与节能意识,通过智能照明、智能温控等系统的运用,鼓励居民节约资源、保护环境。 三、智慧社区的未来发展与无限可能 智慧社区的未来发展充满了无限可能。随着技术的不断进步与创新,智慧社区将朝着更加智能化、融合化的方向发展。比如,利用人工智能技术进行社区管理与服务,将能够进一步提升社区的智能化水平;而5G、物联网等新技术的运用,则将让智慧社区的连接更加紧密、服务更加高效。 同时,智慧社区还将更加注重居民的体验与需求,通过不断优化智能化设备的功能与服务,让居民享受到更加便捷、舒适的生活。未来,智慧社区将成为人们追求高品质生活的重要选择之一,它不仅是一个居住的空间,更是一个融合了科技、服务、人文关怀的综合性生态系统,让人们的生活更加美好、更加精彩。 综上所述,智慧社区整体解决方案以其科技魅力、增值服务与人文关怀以及未来发展潜力,正吸引着越来越多的关注与认可。它不仅能够提升社区的管理效率与居民的生活品质,更能够为社区的可持续发展注入新的活力与动力。
PowerSettingsExplorer.rar 电脑的电源管理软件,明白的不多说。自己搜索即可知道。
deepseek最新资讯,配置方法,使用技巧,持续更新中
deepseek最新资讯、配置方法、使用技巧,持续更新中
RabbitMQ 是一个开源的消息代理(Message Broker),实现了 AMQP(Advanced Message Queuing Protocol) 协议,用于在分布式系统中实现高效、可靠的消息传递。
西门子S7-1200与汇川PLC新通信选择:Ethernet IP通信的突破与优势,功能安全及精准同步的创新实践。,西门子S7-1200与汇川PLC通信新选择:Ethernet IP通信方案亮相,替代Modbus TCP实现更高级功能与安全控制。,西门子PLC和汇川PLC新通信选择-西门子S7-1200 1500系列PLC也开始支持Ethernet IP通信了。 这为西门子系列的PLC和包括汇川AM400 600等Codesys系PLC的通信提供了新的解决方案。 当前两者之间的通信大多采用ModBus TCP通信。 Modbus TCP和EtherNet IP的区别主要是应用层不相同,ModbusTCP的应用层采用Modbus协议,而EtherNetIP采用CIP协议,这两种工业以太网的数据链路层采用的是CSMACCD,因此是标准的以太网,另外,这两种工业以太网的网络层和传输层采用TCPIP协议族。 还有一个区别是,Modbus协议中迄今没有协议来完成功能安全、高精度同步和运功控制等,而EtherNet IP有CIPSatety、ClIP Sync和ClPMotion来
自适应无迹卡尔曼滤波AUKF算法:系统估计效果展示与特性分析(含MATLAB代码与Excel数据),自适应无迹卡尔曼滤波AUKF算法:系统估计效果展示与特性分析(含MATLAB代码与Excel数据),自适应无迹卡尔曼滤波AUKF算法 配套文件包含MATLAB代码+excel数据+学习资料 估计效果与系统特性有关,图片展示为一复杂系统估计效果 ,AUKF算法; MATLAB代码; excel数据; 学习资料; 估计效果; 系统特性。,自适应无迹卡尔曼滤波AUKF算法:MATLAB代码与学习资料
基于MATLAB Simscape的IGBT开关特性模型:揭示开关损耗、米勒平台及瞬态行为的分析工具,IGBT开关特性模型与MATLAB Simscape模拟:深入理解开关行为及损耗数据,IGBT开关特性模型,MATLAB Simscape模型。 该模型展示了IGBT的详细的开关模型,用于创建开关损耗列表数据。 有助于理解IGBT米勒平台、瞬态开关行为。 也可以用于MOOSFET。 ,IGBT开关模型; MATLAB Simscape; 开关损耗; 米勒平台; 瞬态开关行为; MOOSFET。,MATLAB Simscape中IGBT精细开关模型:揭示米勒平台与瞬态行为
基于卷积神经网络CNN的多输入单输出数据回归预测——含详细注释与多种评估指标(R2、MAE、MBE),基于卷积神经网络CNN的多输入单输出数据回归预测模型详解——附代码注释、指标评估及Excel数据处理方法,基于卷积神经网络CNN的数据回归预测 多输入单输出预测 代码含详细注释,不负责 数据存入Excel,替方便,指标计算有决定系数R2,平均绝对误差MAE,平均相对误差MBE ,基于卷积神经网络CNN; 数据回归预测; 多输入单输出; 详细注释; Excel存储; 指标计算(R2; MAE; MBE); 不负责。,基于CNN的卷积数据回归预测模型:多输入单输出代码详解与性能评估
2024免费微信小程序毕业设计成品,包括源码+数据库+往届论文资料,附带启动教程和安装包。 启动教程:https://www.bilibili.com/video/BV1BfB2YYEnS 讲解视频:https://www.bilibili.com/video/BV1BVKMeZEYr 技术栈:Uniapp+Vue.js+SpringBoot+MySQL。 开发工具:Idea+VSCode+微信开发者工具。