头图

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)

点击【保存并展示】,制作完成!

图表效果如下所示:

官网地址:

http://www.datagear.tech

源码地址:

Gitee:https://gitee.com/datagear/datagear

Github:https://github.com/datageartech/datagear

4 声望
0 粉丝
0 条评论
推荐阅读
DataGear 制作基于Vue2、Element UI前端框架的数据可视化看板
DataGear 数据可视化看板内置了一些基本、简单的页面交互组件,当它们无法满足实际看板需求时,可以引入更流行和强大的前端框架。本文以Vue2、Element UI前端框架为例,介绍如何制作具有更丰富交互组件功能的数据...

用户bPc0kOH阅读 317

封面图
JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy49阅读 7.3k评论 12

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 6.9k评论 12

封面图
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs32阅读 3.5k评论 5

封面图
安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城29阅读 6.4k评论 5

封面图
2022大前端总结和2023就业分析
我在年前给掘金平台分享了《2022年热点技术盘点》的前端热点,算是系统性的梳理了一下我自己对前端一整年的总结。年后,在知乎上看到《前端的就业行情怎么样?》,下面都是各种唱衰前端的论调,什么裁员,外包化...

i5ting27阅读 2.3k评论 4

封面图
深入理解React Diff算法
fiber上的updateQueue经过React的一番计算之后,这个fiber已经有了新的状态,也就是state,对于类组件来说,state是在render函数里被使用的,既然已经得到了新的state,那么当务之急是执行一次render,得到持有新...

nero31阅读 11.8k评论 3

4 声望
0 粉丝
宣传栏