当前位置： 首页 > news >正文

如何用Excel制作一张能在网上浏览的动态数据报表

news 2026/3/31 12:02:51

前言

如今各类BI产品大行其道，“数据可视化”成为一个热门词汇。相比价格高昂的各种BI软件，用Excel来制作动态报表就更加经济便捷。今天小编就将为大家介绍一下如何使用葡萄城公司的纯前端表格控件——SpreadJS来实现一个Excel动态报表：

实现步骤

1.在原始数据的基础上生成数据透视表

制作这样的数据大屏首先必须要明确目的，比如在这里围绕销售金额制作一个数据大屏，首先点击数据源，然后点击插入找到数据透视表，随后将年份放在行字段，然后将销售金额放在值字段，因为在这里数值比较大，可以选择销售金额这一列数据，然后按快捷键Ctrl 1调出格式窗口，点击自定义，将类型设置为0!.0,这样的话就变为了万元显示，然后在设计中找到总计，选择对行和列禁用，将数据透视表中的总计禁用掉。

2.根据数据生成图表

选择数据区域，然后在图表中找到饼图，随后为饼图添加数据标签，紧接着点击标签按Ctrl + 1调出格式窗口，勾选类别名称然后将分隔符设置为新的文本行，最后将无用的图例删掉即可，至此的第一个图表就制作完毕了。

为了添加更多图表，复制刚才设置的数据透视表，在复制的数据透视表中将年份这个字段拖走，然后将省份这个字段放在行字段，最后将数字更改为万元显示，然后插入一个横向的条形图，将无用的图例删除掉即可。需要注意的是，你需要设置几个图表，就需要复制几次数据透视表，更改为自己需要的字段，最后插入图表，在这里就以3个为例跟大家演示制作方法。

为了让多张图表能够联动变化，点击数据透视表，在工具栏中找到插入切片器，然后分别勾选，年份，省份，厂商点击确定，这样的话就插入了3个切片器，随后将他们更改下大小放在合适的位置即可。随后点击一个切片器，在切片器选项中选择链接到报表，勾选其他的两个报表即可，以此类推，其余的2个切片器也需要这样设置，设置完毕后就制作完毕了。

至此，一张简单的可视化数据报表就制作好了。有时候，制作好的可视化报表需要通过网络让更多的人查阅，那么有什么好办法呢？

实现在线化

下面小编为大家介绍如何使用借助SpreadJS实现在线化查看：

首先打开SpreadJS的学习指南：

按照学习指南上的代码进行编程实践：

<!DOCTYPE html>
<html>
<head><meta charset='UTF-8'><title>Spread-CDN</title><link rel='icon' href='./assets/images/logo.png' type='image/x-icon'><linkhref='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets/styles/gc.spread.sheets.excel2013white.css'rel='stylesheet' type='text/css' /><script type='text/javascript'src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets/dist/gc.spread.sheets.all.min.js'></script><scriptsrc='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js'></script><scriptsrc='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js'></script><scriptsrc='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-slicers/dist/gc.spread.sheets.slicers.min.js'></script><scriptsrc='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-print/dist/gc.spread.sheets.print.min.js'></script><scriptsrc='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-barcode/dist/gc.spread.sheets.barcode.min.js'></script><scriptsrc='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-pdf/dist/gc.spread.sheets.pdf.min.js'></script><scriptsrc='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js'></script><scriptsrc='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js'></script><scriptsrc='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-ganttsheet/dist/gc.spread.sheets.ganttsheet.min.js'></script><scriptsrc='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-formula-panel/dist/gc.spread.sheets.formulapanel.min.js'></script><scriptsrc='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-excelio/dist/gc.spread.excelio.min.js'></script><scriptsrc='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-io/dist/gc.spread.sheets.io.min.js'></script><scriptsrc='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js'></script><script>GC.Spread.Common.CultureManager.culture('zh-cn')</script><style>* {margin: 0;padding: 0;}#app {overflow: hidden;}#spread-container {width: 100vw;height: 100vh;}</style>
</head>
<body>
<input type="file" id="file"/>
<div id='app'><div id='spread-container'></div>
</div><script>const spread = new GC.Spread.Sheets.Workbook('spread-container')let sheet = spread.getActiveSheet()const fileElement = document.querySelector('#file')fileElement.addEventListener('change', function (e) {const file = e.target.files[0]spread.import(file, ()=>{fileElement.style.display = 'none'})})
</script>
</body>
</html>

这里使用<input type=“file” />来选择本地文件，在成功导入后将该元素隐藏，以便在全屏预览报表时没有多余元素干扰。想导入其他模板时，只需刷新页面，用来选择模板文件的按钮就又出现了。

最后导入在Excel中制作好的报表模板，一张可在线浏览的动态Excel报表就大功告成了。

总结

文章只是简单演示，没有加复杂的样式，如果您想做出更好的显示效果，可以充分调用自己的艺术细胞，做出更加美观炫酷的动态报表，甚至做一个数据大屏也是可以实现的，如果您对的SpreadJS感兴趣的话，也欢迎访问SpreadJS官网。

扩展链接：

创意展示：打造数据大屏的炫酷天气预报插件

聊一聊数字孪生与3D可视化

探秘移动端BI：发展历程与应用前景解析

从表单驱动到模型驱动，解读低代码开发平台的发展趋势

低代码开发平台是什么？

基于分支的版本管理，帮助低代码从项目交付走向定制化产品开发

相关文章：

如何用Excel制作一张能在网上浏览的动态数据报表

前言 如今各类BI产品大行其道&#xff0c;“数据可视化”成为一个热门词汇。相比价格高昂的各种BI软件&#xff0c;用Excel来制作动态报表就更加经济便捷。今天小编就将为大家介绍一下如何使用葡萄城公司的纯前端表格控件——SpreadJS来实现一个Excel动态报表&#xff1a; 实…...

编程日记 2023/12/24 15:49:38

双向数据绑定是什么

一、什么是双向绑定 我们先从单向绑定切入单向绑定非常简单&#xff0c;就是把Model绑定到View&#xff0c;当我们用JavaScript代码更新Model时&#xff0c;View就会自动更新双向绑定就很容易联想到了&#xff0c;在单向绑定的基础上&#xff0c;用户更新了View&#xff0c;Mo…...

编程日记 2023/12/24 15:47:37

鱼眼标定方式

鱼眼作用 人单眼水平视角最大可达156度&#xff0c;垂直方向150度。为了增加可视范围&#xff0c;摄像头可以通过畸变参数扩大视野&#xff0c;一般100度到200度的fov。所以鱼眼是为了看的视野更大&#xff0c;注意在一定分辨率下&#xff0c;fov边缘的像素点稀疏&#xff0c;…...

编程日记 2023/12/24 15:44:34

详解Keras3.0 KerasNLP Models: GPT2 GPT2Tokenizer

1、GPT2Tokenizer 用于将文本数据转换为适合训练和预测的格式&#xff0c;主要功能是将输入的文本进行分词、编码等操作&#xff0c;以便在神经网络中使用 keras_nlp.models.GPT2Tokenizer(vocabulary, merges, **kwargs) 参数说明 vocabulary&#xff1a;一个字典&#x…...

编程日记 2023/12/24 15:42:32

2016年第五届数学建模国际赛小美赛B题直达地铁线路解题全过程文档及程序

2016年第五届数学建模国际赛小美赛 B题 直达地铁线路 原题再现&#xff1a; 在目前的大都市地铁网络中&#xff0c;在两个相距遥远的车站之间运送乘客通常需要很长时间。我们可以建议在两个长途车站之间设置直达班车&#xff0c;以节省长途乘客的时间。   第一部分&#xf…...

编程日记 2023/12/24 15:37:28

三秦通ETC续航改造

前些天开车时ETC每隔2分钟滴滴响一下&#xff0c;重插卡提示电池电压低 2.8V。看来应该是电池不行了。去银行更换ETC应该是需要费用的。还有一种办法是注销掉&#xff0c;然后去别的银行办一个。不过我想自己更换电池试一下。 首先拆下ETC&#xff0c;我使用的办法是开水烫。烧…...

编程日记 2023/12/24 15:34:26

使用Python实现发送Email电子邮件【第19篇—python发邮件】

文章目录 &#x1f47d;使用Python实现发送Email电子邮件&#x1f3b6;实现原理&#x1f3c3;Python实现发送Email电子邮件-基础版&#x1f46b;实现源码&#x1f646;源码解析 &#x1f487;Python实现发送Email电子邮件-完善版&#x1f46b;实现源码&#x1f646;源码解析&am…...

编程日记 2023/12/24 15:30:22

Docker基本命令和Docker怎么自己制作镜像

基本命令 启动新的容器&#xff08;指定容器名称和端口映射【主机端口&#xff1a;容器端口】) docker run --name 容器名 -p 8080:80 镜像名 启动新的容器&#xff08;交互式&#xff09; docker run -it centos7-with-jdk /bin/bash 特权方式启动容器 docker run -d --…...

编程日记 2023/12/24 15:24:17

Netty-2-数据编解码

解析编解码支持的原理 以编码为例&#xff0c;要将对象序列化成字节流&#xff0c;你可以使用MessageToByteEncoder或MessageToMessageEncoder类。 这两个类都继承自ChannelOutboundHandlerAdapter适配器类&#xff0c;用于进行数据的转换。 其中&#xff0c;对于MessageToMe…...

编程日记 2023/12/24 15:20:13

伽马校正：FPGA

参考资料&#xff1a; Tone Mapping 与 Gamma Correction - 知乎 (zhihu.com) Book_VIP: 《基于MATLAB与FPGA的图像处理教程》此书是业内第一本基于MATLAB与FPGA的图像处理教程&#xff0c;第一本真正结合理论及算法加速方案&#xff0c;在Matlab验证&#xff0c;以及在FPGA上…...

编程日记 2023/12/24 15:15:10

【SpringCloud笔记】（8）服务网关之GateWay

GateWay 概述简介 官网地址&#xff1a; 上一代网关Zuul 1.x&#xff1a;https://github.com/Netflix/zuul/wiki&#xff08;有兴趣可以了解一下&#xff09; gateway&#xff1a;https://cloud.spring.io/spring-cloud-static/spring-cloud-gateway/2.2.1.RELEASE/reference/…...

编程日记 2023/12/24 15:13:08

Compose常用布局

Compose布局基础知识 上一节对Compose做了简单的介绍&#xff0c;本章节主要介绍Compose中常用的布局&#xff0c;其中包括三个基础布局&#xff08;Colmun、Row、Box&#xff09;&#xff1b;以及其他常用布局&#xff08;ConstraintLayout 、BoxWithConstraints、HorizontalP…...

编程日记 2023/12/24 15:12:06

使用keytool查看Android APK签名

文章目录 一、找到JDK位置二、使用方法2.1 打开windows命令行工具2.2 查看签名 三、如何给APK做系统签名呢? 一、找到JDK位置 安卓AS之后&#xff0c;可选择继续安装JDK&#xff0c;如本文使用amazon版本默认位置&#xff1a;C:\Users\66176.jdks\corretto-1.8.0_342可通过自…...

编程日记 2023/12/24 15:11:05

数据库学习日常案例20231221-oracle libray cache lock分析

1 问题概述&#xff1a; 阻塞的源头为两个ddl操作导致大量的libray cache lock 其中1133为gis sde的create table as语句。 其中697为alter index语句。...

编程日记 2023/12/24 15:08:03

【数据结构】最短路径算法实现（Dijkstra（迪克斯特拉），FloydWarshall（弗洛伊德） ）

文章目录 前言一、Dijkstra&#xff08;迪克斯特拉&#xff09;1.方法&#xff1a;2.代码实现 二、FloydWarshall&#xff08;弗洛伊德&#xff09;1.方法2.代码实现 完整源码 前言 最短路径问题&#xff1a;从在带权有向图G中的某一顶点出发&#xff0c;找出一条通往另一顶点…...

编程日记 2023/12/24 15:07:02

算法模板之队列图文详解

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;算法模板、数据结构 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 &#x1f4cb;前言一. ⛳️模拟队列1.1 &#x1f514;用数组模拟实现队列1.1.1 &#x1f47b;队列的定…...

编程日记 2023/12/24 15:05:00

[node]Node.js 中REPL简单介绍

[node]Node.js 中REPL简单介绍 什么是REPL为什么使用REPL如何使用REPL 命令REPL模式node的全局内容展示node全局所有模块查看全局模块具体内容其它命令 实践 什么是REPL Node.js REPL(Read Eval Print Loop:交互式解释器) 表示电脑的环境&#xff0c;类似 Windows 系统的终端或…...

编程日记 2023/12/24 15:02:59

AtomHub 开源容器镜像中心开放公测，国内服务稳定下载

由开放原子开源基金会主导&#xff0c;华为、浪潮、DaoCloud、谐云、青云、飓风引擎以及 OpenSDV 开源联盟、openEuler 社区、OpenCloudOS 社区等成员单位共同发起建设的 AtomHub 可信镜像中心正式开放公测。AtomHub 秉承共建、共治、共享的理念&#xff0c;旨在为开源组织和开…...

编程日记 2023/12/24 15:01:58

java8实战 lambda表达式、函数式接口、方法引用双冒号(中)

前言 书接上文&#xff0c;上一篇博客讲到了lambda表达式的应用场景&#xff0c;本篇接着将java8实战第三章的总结。建议读者先看第一篇博客 其他函数式接口例子 上一篇有讲到Java API也有其他的函数式接口&#xff0c;书里也举了2个例子&#xff0c;一个是java.util.functi…...

编程日记 2023/12/24 14:58:55

FPGA高端项目：UltraScale GTH + SDI 视频编解码，SDI无缓存回环输出，提供2套工程源码和技术支持

目录 1、前言免责声明 2、相关方案推荐我这里已有的 GT 高速接口解决方案我目前已有的SDI编解码方案 3、详细设计方案设计框图3G-SDI摄像头LMH0384均衡EQUltraScale GTH 的SDI模式应用UltraScale GTH 基本结构参考时钟的选择和分配UltraScale GTH 发送和接收处理流程UltraScale…...

编程日记 2023/12/24 14:55:53

在MATLAB中调用与可视化Lingbot-Depth-Pretrain-ViTL-14的深度估计结果

在MATLAB中调用与可视化Lingbot-Depth-Pretrain-ViTL-14的深度估计结果 对于很多从事计算机视觉、机器人或者测绘相关研究的工程师和学者来说&#xff0c;深度估计是一个基础又关键的任务。它能从一张普通的二维图片中&#xff0c;推测出每个像素点距离相机的远近&#xff0c;…...

编程新知 2026/3/31 11:47:21

TTI-Chicago等机构突破性研究：AI学会了一笔一划创作矢量草图

这项由芝加哥丰田技术研究院&#xff08;TTI-Chicago&#xff09;、芝加哥大学和麻省理工学院联合开展的研究发表于2026年&#xff0c;论文编号为arXiv:2603.19500v1。有兴趣深入了解技术细节的读者可以通过该编号查询完整论文。当我们看到一位画家创作时&#xff0c;他们通常不…...

编程新知 2026/3/31 10:42:55

对比学习演进笔记：从Memory Bank到MoCo的负样本队列设计

1. 对比学习的核心思想与演进背景 对比学习&#xff08;Contrastive Learning&#xff09;作为自监督学习的重要分支&#xff0c;其核心思想可以用一句话概括&#xff1a;让相似样本的特征表示尽可能接近&#xff0c;不相似样本的特征表示尽可能远离。这种思想最早可以追溯到20…...

编程新知 2026/3/31 10:20:37

SEO自动化工具如何提高网站排名_SEO自动化工具如何进行数据报告

<h2>SEO自动化工具如何提高网站排名</h2> <p>在当今互联网时代&#xff0c;网站的排名直接关系到其流量和业务增长。SEO自动化工具如何在提高网站排名方面发挥作用呢&#xff1f;本文将从多个角度展开讨论&#xff0c;帮助你理解这些工具如何提升网站在搜索引…...

编程新知 2026/3/31 9:13:56

Phi-3-mini-4k-instruct-gguf应用案例：HR招聘话术生成、产品FAQ自动整理、日报模板填充

Phi-3-mini-4k-instruct-gguf应用案例&#xff1a;HR招聘话术生成、产品FAQ自动整理、日报模板填充 1. 模型简介 Phi-3-mini-4k-instruct-gguf是微软推出的轻量级文本生成模型&#xff0c;特别适合处理问答、文本改写和内容整理等任务。这个GGUF版本的模型经过优化&#xff0…...

编程新知 2026/3/31 7:25:10

零成本打造私有云盘：从PHPStudy安装到IPv6动态域名解析全攻略

零成本打造私有云盘&#xff1a;从PHPStudy安装到IPv6动态域名解析全攻略 在数字化时代&#xff0c;个人数据存储需求呈爆炸式增长。网盘限速、隐私泄露、订阅费用高昂等问题困扰着许多用户。本文将手把手教你如何利用闲置电脑和免费工具&#xff0c;打造一个完全由自己掌控的私…...

编程新知 2026/3/31 7:13:04

Zigbee网关配网操作全解析：从连接到触发

1. Zigbee网关配网前的准备工作 第一次接触Zigbee网关配网的朋友可能会觉得有点复杂&#xff0c;但其实只要跟着步骤一步步来&#xff0c;整个过程并不难。我刚开始接触时也踩过不少坑&#xff0c;现在把这些经验都整理出来&#xff0c;希望能帮你少走弯路。 首先得确认你的硬件…...

编程新知 2026/3/31 6:22:40

解决EF Core中的GroupBy与Include的冲突问题

在使用Entity Framework Core（EF Core）进行数据库操作时，我们常常会遇到一些复杂的查询需求，尤其是在涉及到数据的分组与关联加载时。今天我们来探讨一下如何在EF Core中处理GroupBy与Include方法的冲突。 问题描述 假设我们有一个产品数据库，包含产品（Products）、供应…...

编程新知 2026/3/31 5:56:31

Wan2.2-I2V-A14B镜像效果展示：夕阳海滩10秒1080P高清视频生成作品集

Wan2.2-I2V-A14B镜像效果展示&#xff1a;夕阳海滩10秒1080P高清视频生成作品集 1. 惊艳的视频生成效果 想象一下&#xff0c;只需简单描述&#xff0c;就能让电脑自动生成一段夕阳下的海滩视频。Wan2.2-I2V-A14B镜像让这个想象成为现实&#xff0c;它能将文字描述转化为高清…...

编程新知 2026/3/31 5:30:13

在供应链与资本获取驱动下，近半数全球高管计划于未来12个月内拓展美国业务布局

• 45%的企业高层管理人员计划在未来12个月内设立美国法律实体&#xff1b;另有27%表示将在未来两至三年内考虑进入美国市场 • 65%的受访者将供应链或制造效率视为推动赴美扩张的首要驱动因素 • 88%的企业将联邦及州层面的税务申报认定为美国合规中最具挑战性的领域 CSC最新研…...

编程新知 2026/3/31 4:13:03