DataGear 制作Excel动态数据可视化图表
DataGear 4.1.0 版本增强了Excel数据集功能,新增了【工作表名称】项,并且支持填写参数化语法内容,使得可基于Excel多工作表,构建动态数据可视化图表。
本文以某商品三个地区的各季度销售额Excel为例,介绍如何制作Excel动态数据可视化图表。
上述Excel文件包含三个工作表,对应三个地区的季度销售额数据,详细格式如下所示:
第一个工作表名称为:地区-1
,销售数据为:
NAME VALUE
一季度 90
二季度 155
三季度 80
四季度 130
第二个工作表名称为:地区-2
,销售数据为:
NAME VALUE
一季度 50
二季度 95
三季度 150
四季度 120
第三个工作表名称为:地区-3
,销售数据为:
NAME VALUE
一季度 120
二季度 80
三季度 100
四季度 130
首先,打开 DataGear 系统主页面,点击左侧【数据集】导航条目,在页面中点击【添加】-【Excel】条目,新建Excel数据集:
名称:各地区季度销售额
文件类型:上传文件
工作表名称:${地区}
${地区}
即是参数化内容,即:工作表名称动态设置为数据集参数地区
的值。
然后,在上述数据集页面的【参数】栏,添加对应【工作表名称】的参数:
名称 类型 必填 输入框类型 输入框配置
地区 字符串 是 单选框 ["地区-1","地区-2","地区-3"]
【输入框配置】填写的 ["地区-1","地区-2","地区-3"]
即是上述Excel的三个工作表名称
点击【预览】成功后,保存数据集。
然后,点击 DataGear 系统主页面左侧【图表】导航条目,在页面中点击【添加】条目,新建图表:
名称:各地区季度销售额
图表类型:基本柱状图
数据集:各地区季度销售额
数据标记:
属性:NAME -> 名称 (name)
属性:VALUE -> 数值 (value)
点击【保存并展示】,制作完成!
图表效果如下所示:
官网地址:
源码地址:
4 声望
0 粉丝
推荐阅读
DataGear 制作基于Vue2、Element UI前端框架的数据可视化看板
DataGear 数据可视化看板内置了一些基本、简单的页面交互组件,当它们无法满足实际看板需求时,可以引入更流行和强大的前端框架。本文以Vue2、Element UI前端框架为例,介绍如何制作具有更丰富交互组件功能的数据...
用户bPc0kOH阅读 317
JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...
jenemy赞 49阅读 7.3k评论 12
再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...
libinfs赞 42阅读 6.9k评论 12
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...
wuwhs赞 32阅读 3.5k评论 5
安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...
边城赞 29阅读 6.4k评论 5
2022大前端总结和2023就业分析
我在年前给掘金平台分享了《2022年热点技术盘点》的前端热点,算是系统性的梳理了一下我自己对前端一整年的总结。年后,在知乎上看到《前端的就业行情怎么样?》,下面都是各种唱衰前端的论调,什么裁员,外包化...
i5ting赞 27阅读 2.3k评论 4
深入理解React Diff算法
fiber上的updateQueue经过React的一番计算之后,这个fiber已经有了新的状态,也就是state,对于类组件来说,state是在render函数里被使用的,既然已经得到了新的state,那么当务之急是执行一次render,得到持有新...
nero赞 31阅读 11.8k评论 3
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。