`

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

    电子工程0欧姆电阻在PCB设计中的多功能应用

    内容概要:0欧姆电阻在电路设计中有多种重要作用。它不仅可以在PCB上为调试提供便利,还能用于跳线、替代不确定参数的元件以及测量电路的耗电流。此外,在布线困难时可作为应急解决方案。在高频信号环境下,它能充当电感或电容,有助于解决EMC问题。对于地线处理,0欧姆电阻可用于实现单点接地,避免模拟地和数字地直接大面积相连带来的互相干扰问题。在跨接电流回路方面,它可以提供较短的回流路径,减少干扰。同时,0欧姆电阻还适用于配置电路,防止用户误操作跳线或拨码开关,并且在布线、调试、测试、温度补偿等方面有着广泛应用,尤其在EMC对策中表现突出。; 适合人群:电子工程师、硬件设计师以及对电路设计感兴趣的爱好者。; 使用场景及目标:①在PCB设计阶段,利用0欧姆电阻进行灵活的电路调试与优化;②解决高频信号下的EMC问题,确保电路稳定性和抗干扰能力;③实现单点接地,避免不同地线间的相互干扰;④提高电路的可维护性和可靠性,降低生产成本。; 阅读建议:本文详细介绍了0欧姆电阻在电路设计中的多种应用场景,读者应结合具体项目需求来理解和运用这些知识,特别是在面对复杂的电路布局和电磁兼容性问题时,要充分考虑0欧姆电阻的独特优势。

    一个基于SpringBoot+Mybatis+Mysql+Html实现的页面登录案例

    mysql安装教程 一个基于SpringBoot+Mybatis+Mysql+Html实现的页面登录案例.

    全域旅游综合解决方案PPT(71页).pptx

    在探索智慧旅游的新纪元中,一个集科技、创新与服务于一体的整体解决方案正悄然改变着我们的旅行方式。智慧旅游,作为智慧城市的重要分支,旨在通过新一代信息技术,如云计算、大数据、物联网等,为游客、旅游企业及政府部门提供无缝对接、高效互动的旅游体验与管理模式。这一方案不仅重新定义了旅游行业的服务标准,更开启了旅游业数字化转型的新篇章。 智慧旅游的核心在于“以人为本”,它不仅仅关注技术的革新,更注重游客体验的提升。从游前的行程规划、信息查询,到游中的智能导航、个性化导览,再到游后的心情分享、服务评价,智慧旅游通过构建“一云多屏”的服务平台,让游客在旅游的全过程中都能享受到便捷、个性化的服务。例如,游客可以通过手机APP轻松定制专属行程,利用智能语音导览深入了解景点背后的故事,甚至通过三维GIS地图实现虚拟漫游,提前感受目的地的魅力。这些创新服务不仅增强了游客的参与感和满意度,也让旅游变得更加智能化、趣味化。 此外,智慧旅游还为旅游企业和政府部门带来了前所未有的管理变革。通过大数据分析,旅游企业能够精准把握市场动态,实现旅游产品的精准营销和个性化推荐,从而提升市场竞争力。而政府部门则能利用智慧旅游平台实现对旅游资源的科学规划和精细管理,提高监管效率和质量。例如,通过实时监控和数据分析,政府可以迅速应对旅游高峰期的客流压力,有效预防景区超载,保障游客安全。同时,智慧旅游还促进了跨行业、跨部门的数据共享与协同合作,为旅游业的可持续发展奠定了坚实基础。总之,智慧旅游以其独特的魅力和无限潜力,正引领着旅游业迈向一个更加智慧、便捷、高效的新时代。

    工业自动化中模拟量滤波防抖PLC程序的实现与应用

    内容概要:本文详细介绍了如何通过PLC程序实现模拟量滤波防抖,确保电流、电压和热电阻等信号的准确采集。核心算法采用掐头去尾平均法,即去掉一组数据中的最大值和最小值后取剩余数据的平均值,以消除因环境干扰导致的异常值。文中提供了详细的代码实现步骤,包括数据结构定义、主程序逻辑、间接寻址方法以及参数配置。此外,还讨论了如何通过死区判断和上升率限制进一步优化滤波效果,提高系统的稳定性和响应速度。 适合人群:从事工业自动化领域的工程师和技术人员,尤其是熟悉PLC编程和模拟量信号处理的专业人士。 使用场景及目标:适用于需要高精度模拟量信号采集的工业控制系统,如电力、化工、制造业等领域。主要目标是提升数据采集的准确性和稳定性,减少外部干扰带来的误差。 其他说明:文中提供的代码示例基于西门子S7-1200/1500系列PLC,但相关原理和方法同样适用于其他品牌的PLC。建议在实际应用中根据具体情况调整参数设置,以达到最佳效果。

    【人工智能大模型发展】从技术突破到场景落地:大模型发展图谱与DeepSeek创新应用解析

    内容概要:本文详细介绍了大模型的发展现状与未来趋势,尤其聚焦于DeepSeek这一创新应用。文章首先回顾了人工智能的定义、分类及其发展历程,指出从摩尔定律到知识密度提升的转变,强调了大模型知识密度的重要性。随后,文章深入探讨了DeepSeek的发展路径及其核心价值,包括其推理模型、思维链技术的应用及局限性。此外,文章展示了DeepSeek在多个行业的应用场景,如智能客服、医疗、金融等,并分析了DeepSeek如何赋能个人发展,具体体现在公文写作、文档处理、知识搜索、论文写作等方面。最后,文章展望了大模型的发展趋势,如通用大模型与垂域大模型的协同发展,以及本地部署小模型成为主流应用渠道的趋势。 适合人群:对人工智能和大模型技术感兴趣的从业者、研究人员及希望利用DeepSeek提升工作效率的个人用户。 使用场景及目标:①了解大模型技术的最新进展和发展趋势;②掌握DeepSeek在不同领域的具体应用场景和操作方法;③学习如何通过DeepSeek提升个人在公文写作、文档处理、知识搜索、论文写作等方面的工作效率;④探索大模型在特定行业的应用潜力,如医疗、金融等领域。 其他说明:本文不仅提供了理论知识,还结合实际案例,详细介绍了DeepSeek在各个场景下的应用方式,帮助读者更好地理解和应用大模型技术。同时,文章也指出了当前大模型技术面临的挑战,如模型的局限性和数据安全问题,鼓励读者关注技术的持续改进和发展。

    电力负荷预测中LSSVM及其改进算法的性能对比研究

    内容概要:本文详细比较了四种基于最小二乘支持向量机(LSSVM)的短期电力负荷预测算法:原始LSSVM、SSA-LSSVM、VMD-LSSVM以及VMD-SSA-LSSVM。通过对这些算法的具体实现和性能评估,展示了每种方法的优势和局限性。实验结果显示,随着算法复杂度的增加,预测精度显著提高,特别是VMD-SSA-LSSVM在RMSE和MAPE等评价指标上表现出色,达到了接近真实值的预测效果。然而,这也伴随着计算成本的大幅上升。 适合人群:从事电力系统调度、数据分析、机器学习领域的研究人员和技术人员。 使用场景及目标:适用于需要进行短期电力负荷预测的研究项目或实际应用,旨在提高预测准确性,减少因天气变化、节假日等因素带来的不确定性影响。 其他说明:文中提供了详细的Python代码片段,帮助读者理解和复现相关算法。同时提醒,在选择模型时需综合考虑预测精度与计算效率之间的平衡。

    基于Python+Django的电影推荐系统:融合机器学习与深度学习的全栈实现

    内容概要:本文详细介绍了一种基于Python和Django框架构建的电影推荐系统。该系统不仅涵盖了用户端的基本功能(如登录、搜索、浏览、评论、评分、收藏),还包括管理端的增删改查操作。后端使用Python和Django框架,结合MySQL数据库,前端采用HTML、CSS和JavaScript实现交互界面。推荐算法方面,利用机器学习和深度学习技术,特别是协同过滤和内容过滤相结合的方式,确保推荐结果的多样性和精准性。此外,文中还讨论了一些常见的技术挑战及其解决方案,如用户冷启动问题、前端交互效果优化、数据库配置错误等。 适合人群:具有一定编程经验的Web开发者和技术爱好者,尤其是对Django框架、机器学习和深度学习感兴趣的读者。 使用场景及目标:适用于希望深入了解并实现一个完整的电影推荐系统的个人或团队。主要目标是掌握如何整合前后端技术,运用机器学习和深度学习算法提升用户体验。 其他说明:文中提供了大量代码片段和实践经验,帮助读者更好地理解和实施各个技术细节。同时强调了系统优化的重要性,如通过Redis缓存提高查询效率,使用AJAX实现无缝加载等。

    MATLAB实现V2G光储充一体化微网多目标优化调度策略及其应用

    内容概要:本文探讨了基于MATLAB平台的V2G(车辆到电网)光储充一体化微网多目标优化调度策略。该策略旨在通过建立光伏微网中以经济性和并网负荷波动率为双目标的蓄电池和V2G协同调度模型,利用粒子群优化(PSO)算法求解模型。文中详细介绍了模型搭建、核心算法实现、运行模式对比以及算例分析。结果显示,V2G模式能够显著提高系统的经济性和稳定性,减少蓄电池的需求量,优化三方(电网、微网调度中心、电动汽车用户)的利益。 适合人群:从事电力系统优化、智能电网研究的专业人士,尤其是对MATLAB编程有一定基础的研究人员和技术人员。 使用场景及目标:适用于需要优化光储充一体化微网调度策略的研究机构和企业。目标是在保证系统经济运行的同时,稳定并网负荷,减少波动,从而提升整体性能。 其他说明:代码注释详尽,包含并行计算框架、电池寿命模型和可视化模块等多个亮点。通过实际案例验证,证明了V2G模式的有效性。

    三菱FX3U五轴钻孔机PLC与威纶通触摸屏程序解析及优化技巧

    内容概要:本文详细介绍了三菱FX3U五轴钻孔机的PLC程序和威纶通触摸屏配置,涵盖梯形图编程、IO分配表、参数设置、自动补偿机制以及异常处理等方面。文章通过具体的代码实例展示了如何实现加工循环、参数动态调整、安全防护等功能,并分享了调试过程中遇到的问题及解决方案。此外,还提供了完整的工程文件,便于读者快速理解和应用。 适合人群:从事工业自动化领域的工程师和技术人员,尤其是对三菱PLC和威纶通触摸屏有一定了解的人群。 使用场景及目标:帮助读者掌握五轴钻孔机的控制系统设计方法,提高编程效率和设备稳定性,适用于类似机床控制系统的开发和维护。 其他说明:文中提到的许多技巧和注意事项来源于作者的实际工作经验,对于初学者来说非常有价值。同时,提供的完整工程文件可以作为参考模板,节省开发时间和成本。

    matlab开发相关资源.m

    matlab开发相关资源

    a383d-main.zip

    a383d-main.zip

    智慧小区解决方案.pptx

    智慧小区解决方案.pptx

    Seafile 基于 Qt 的 GUI 客户端

    Seafile 基于 Qt 的 GUI 客户端

    无人驾驶车辆局部路径规划:基于Matlab的Astar与RRT算法仿真及优化

    内容概要:本文详细介绍了无人驾驶车辆在局部路径规划中的两种经典算法——Astar和RRT的Matlab实现及其优化。首先,文章解释了Astar算法的核心思想,即通过启发函数进行路径搜索,并针对U型障碍等问题提出了双向搜索策略和动态权重调节。接着,文章探讨了RRT算法的特点,如随机生长特性和路径平滑处理,解决了路径过于曲折的问题。此外,还提出了一种混合算法HRA*,通过改进OPEN集的维护方式,提高了算法效率。最后,通过对不同场景的仿真测试,展示了两种算法在复杂环境中的性能差异,并提供了详细的调参经验和优化建议。 适合人群:对无人驾驶技术和路径规划感兴趣的科研人员、工程师以及有一定编程基础的学习者。 使用场景及目标:适用于研究无人驾驶车辆在复杂环境中的路径规划问题,帮助研究人员理解和优化Astar和RRT算法,提高路径规划的效率和准确性。 其他说明:文中附有大量Matlab代码片段和仿真结果图表,便于读者理解和复现实验。同时,提供了关于栅格地图分辨率、车辆动力学参数等方面的实用建议,有助于实际系统的部署和优化。

    选择.txt

    选择

    西门子200Smart与维纶触摸屏在疫苗车间控制系统的应用:配液、发酵、纯化及CIP清洗工艺详解

    内容概要:本文详细介绍了西门子200Smart PLC与维纶触摸屏在某疫苗车间控制系统的具体应用,涵盖配液、发酵、纯化及CIP清洗四个主要工艺环节。文中不仅展示了具体的编程代码和技术细节,还分享了许多实战经验和调试技巧。例如,在配液罐中,通过模拟量处理确保温度和液位的精确控制;发酵罐部分,着重讨论了PID参数整定和USS通讯控制变频器的方法;纯化过程中,强调了双PID串级控制的应用;CIP清洗环节,则涉及复杂的定时器逻辑和阀门联锁机制。此外,文章还提到了一些常见的陷阱及其解决方案,如通讯干扰、状态机切换等问题。 适合人群:具有一定PLC编程基础的技术人员,尤其是从事工业自动化领域的工程师。 使用场景及目标:适用于需要深入了解PLC与触摸屏集成控制系统的工程师,帮助他们在实际项目中更好地理解和应用相关技术和方法,提高系统的稳定性和可靠性。 其他说明:文章提供了大量实战经验和代码片段,有助于读者快速掌握关键技术点,并避免常见错误。同时,文中提到的一些优化措施和调试技巧对提升系统性能非常有帮助。

    Prosemirror 是一个基于 ContentEditable 的所见即所得 HTML 编辑器,功能强大,支持协作编辑和自定义文档模式Prosemirror 库由多个单独的模块

    Prosemirror 是一个基于 ContentEditable 的所见即所得 HTML 编辑器,功能强大,支持协作编辑和自定义文档模式Prosemirror 库由多个单独的模块

    直线感应电机瞬态磁场仿真教程:Maxwell 16.0与ANSYS 2020关键技术解析

    内容概要:本文详细介绍了使用Maxwell 16.0和ANSYS 2020进行直线感应电机瞬态磁场仿真的方法和技术要点。首先强调了建模前的准备工作,包括初级线圈布置、次级导体材料选择、气隙宽度等参数的确定。然后针对Maxwell 16.0用户,讲解了坐标系的选择(笛卡尔坐标系)、初级绕组绘制、运动参数设置、网格剖分优化以及边界条件的正确配置。对于ANSYS 2020用户,则着重讲述了如何利用Maxwell模块建立模型并在Mechanical中进行电磁力耦合分析,包括参数化扫描设置、气隙厚度扫描、磁密云图动态更新等技巧。此外,文中还分享了许多实用的经验和注意事项,如避免常见的参数设置错误、提高仿真精度的方法、处理推力波动等问题的具体措施。 适合人群:从事电机设计与仿真的工程师、研究人员,尤其是有一定Maxwell和ANSYS使用基础的技术人员。 使用场景及目标:帮助用户掌握直线感应电机瞬态磁场仿真的全流程,确保仿真结果的准确性,提升工作效率。具体应用场景包括但不限于新电机设计验证、现有电机性能优化、故障诊断等。 其他说明:文中提供了大量具体的命令和脚本示例,便于读者直接应用到实际工作中。同时,作者结合自身丰富的实践经验,给出了许多宝贵的建议和警示,有助于读者避开常见陷阱,顺利完成仿真任务。

    【Windows系统】Win10部署DeepSeek 7B模型:Ollama框架安装与模型运行体验

    内容概要:本文详细介绍了在Windows 10上部署DeepSeek 7B模型的步骤。首先,需安装Ollama框架,通过访问官网下载并运行安装包,安装路径默认为C盘且不可更改。安装完成后可通过命令提示符验证是否安装成功。接着,部署DeepSeek 7B模型,从指定网站下载模型后,使用命令`ollama run deepseek-r1:7b`启动模型,系统将自动下载模型文件(约4.7GB),建议开启科学上网以加快下载速度。部署完成后,可以通过ChatBox客户端选择Ollama API和DeepSeek 7B模型进行问答测试。最后,附录提供了DeepSeek 7B的部署要求及硬件配置建议。 适合人群:对AI模型部署有一定兴趣,尤其是希望在本地环境中运行大型语言模型的研究人员和开发者。 使用场景及目标:①为研究人员和开发者提供详细的步骤指导,确保他们能够在本地环境中成功部署DeepSeek 7B模型;②帮助用户理解部署过程中涉及的各项命令和工具的使用方法;③为后续基于DeepSeek 7B模型的应用开发打下基础。 阅读建议:由于部署过程涉及多个步骤和命令行操作,建议读者在实际操作前仔细阅读每一步骤,并根据自身硬件条件调整配置。此外,对于初次接触此类部署的用户,建议先熟悉相关命令行工具的使用,确保顺利完成部署。

Global site tag (gtag.js) - Google Analytics