网站首页 > 博客文章 正文
Charts是一个开源(MIT协议)的图表库,使用简单、响应迅速,拥有线型、柱型、散点型、饼图、百分比简单的图表类型,满足你对图表的基本需求,压缩包仅15kB,是一个非常精简且轻量级的图表。
1、快速开始
https://github.com/frappe/charts
在github上下载项目,然后解压压缩文件,把dist文件夹下的文件放到你项目的任意位置,在你的HTML页面中引入frappe-charts.min.iife.js文件。
然后运行如下所示脚本代码,一个简单的柱状图表就生成了。
data变量是图表的数据,可以通过ajax动态获取生成图表。
通过new Chart(options)方法实例化:
parent:值可以是一个选择器,也可以是一个DOM元素。
type:图表类型,有'bar','line','scatter','pie','percentage'五个类型。
colors:颜色,如果不设置,将使用默认排列顺序。['light-blue', 'blue', 'violet', 'red', 'orange', 'yellow', 'green', 'light-green', 'purple', 'magenta', 'grey', 'dark-grey']。
format_tooltip_x、format_tooltip_y:分别是图表x轴和y轴的工具提示格式化方法。
2、其他类型图表
线型
散点型
饼图
百分比图
3、动态更新数值
chart.update_values(datas,labels):更新全部数值。
chart.add_data_point(data,label,index):指定位置添加一个数值点,默认添加到最后。
remove_data_point(index):移除一个指定位置数值点。
4、简单的聚合
目前只有简单的总数和平均数两个聚合数据。
chart.show_sums()和chart.hide_sums():显示、隐藏总数。
chart.show_averages()和chart.hide_averages():显示、隐藏平均数。
5、监听事件
chart.parent.addEventListener('data-select', function(e){console.log(e);});
监听数据选择事件,可以用来动态展示点击数据的详情。
这是一个简单的图标库,特点在于轻量级、加载速度快,如果你不需要Echarts那么丰富的图表,只需要一点简单的可以考虑一下Charts。
如果你有更好的、实用的插件想要和我们分享,请评论告诉我,感谢您的分享。
猜你喜欢
- 2024-10-05 基于Flink+ClickHouse构建亿级电商实时数据分析平台
- 2024-10-05 手把手教你用Pyecharts库对淘宝数据进行可视化展示
- 2024-10-05 数据可视化之pyecharts系列(二) 让地图动起来
- 2024-10-05 干货 | 全网最新最全Pyecharts可视化教程
- 2024-10-05 JavaScript图表库Highcharts更新至7.2.1版本,新版本抢先看
- 2024-10-05 做PPT还不会用插件?难怪你天天加班!看看大佬们都是怎么做PPT的
- 2024-10-05 学习Power BI视觉对象之VITARA CHARTS
- 2024-10-05 推荐6 个自动化神器工具,让你工作事半功倍
- 2024-10-05 Valve带来更简洁的新版Steam Charts实时统计页面
- 2024-10-05 数据可视化:解析漏斗图(funnel charts)
你 发表评论:
欢迎- 最近发表
- 标签列表
-
- ifneq (61)
- 字符串长度在线 (61)
- googlecloud (64)
- messagesource (56)
- promise.race (63)
- 2019cad序列号和密钥激活码 (62)
- window.performance (66)
- qt删除文件夹 (72)
- mysqlcaching_sha2_password (64)
- ubuntu升级gcc (58)
- nacos启动失败 (64)
- ssh-add (70)
- jwt漏洞 (58)
- macos14下载 (58)
- yarnnode (62)
- abstractqueuedsynchronizer (64)
- source~/.bashrc没有那个文件或目录 (65)
- springboot整合activiti工作流 (70)
- jmeter插件下载 (61)
- 抓包分析 (60)
- idea创建mavenweb项目 (65)
- vue回到顶部 (57)
- qcombobox样式表 (68)
- tomcatundertow (58)
- pastemac (61)
本文暂时没有评论,来添加一个吧(●'◡'●)