首页 > 其他分享 >数据展现之道:精心打造可在线浏览的动态数据报表

数据展现之道:精心打造可在线浏览的动态数据报表

时间:2024-01-17 09:12:35浏览次数:32  
标签:报表 浏览 透视 展现 图表 数据报表 点击 spread 数据

前言

如今各类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'>
  <link
    href='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>
  <script
    src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js'></script>
  <script
    src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js'></script>
  <script
    src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-slicers/dist/gc.spread.sheets.slicers.min.js'></script>
  <script
    src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-print/dist/gc.spread.sheets.print.min.js'></script>
  <script
    src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-barcode/dist/gc.spread.sheets.barcode.min.js'></script>
  <script
    src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-pdf/dist/gc.spread.sheets.pdf.min.js'></script>
  <script
    src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js'></script>
  <script
    src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js'></script>
  <script
    src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-ganttsheet/dist/gc.spread.sheets.ganttsheet.min.js'></script>
  <script
    src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-formula-panel/dist/gc.spread.sheets.formulapanel.min.js'></script>
  <script
    src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-excelio/dist/gc.spread.excelio.min.js'></script>
  <script
    src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-io/dist/gc.spread.sheets.io.min.js'></script>
  <script
    src='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官网

标签:报表,浏览,透视,展现,图表,数据报表,点击,spread,数据
From: https://www.cnblogs.com/powertoolsteam/p/17910427.html

相关文章

  • 在VS Code中启动Edge浏览器调试Vue项目
    最近维护一个Vue2.x的老项目,网上的资料介绍在VS中调试前端代码都是使用Chrome浏览器,但我没有装Chrome浏览器,想在VSCode中直接调试Vue代码,百度了很多资料,尝试了好几种方案,终于找到简单可行的方法。根据微软官方的资料,如果想在VSCode中使用Edge浏览器进行调试,可以安装Microsoft......
  • 短程无线自组网协议之:发展现状与趋势?
        目前国外的芯片大厂大多是两条腿走路,既推出2.4GHz的ZigBee芯片,同时推出Sub-1GHz的射频芯片技术。ZigBee技术虽然也还在发展完善,但是始终没有跳出2.4GHz的的平台,整个协议栈的技术体系也没有发生大的改变,在用户接口层已经开始放弃profile的思路,转向更加标准开放的IPv6技......
  • 亚马逊鲲鹏系统:全自动多账号下单,打造真实浏览轨迹
    亚马逊鲲鹏系统是一款卓越的软件,其独特的功能让用户可以轻松设置多个账号同时进行自动下单,极大地提高了购物效率。操作流程简单明了,用户只需事先设置关键词及ASIN进行货比三家,为用户筛选最优的产品。随后,软件将模拟真人点击、查看、浏览产品详细页面,并自动完成下单购买的过程。其中......
  • 14、nginx设置浏览器缓存
    1.设置expire头浏览器缓存可以通过expires指令输出Header头来实现,expires指令的语法如下:语法:expires[time|epoch|max|off]默认值:expiresoff作用域:http、server、location用途:使用本指令可以控制HTTP应答中的Expires和Cache-Control的Header头信息(起到......
  • 设置响应头在浏览器中下载
    1.设置响应头HttpHeadersheaders=newHttpHeaders();headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);headers.setContentDispositionFormData("attachment","folder.zip");//使用ResponseEnti......
  • 浏览器代理插件Proxy SwitchyOmega安装与使用
    个人博客:无奈何杨(wnhyang)个人语雀:wnhyang共享语雀:在线知识共享Github:wnhyang-OverviewProxySwitchyOmega轻松快捷地管理和切换多个代理设置。安装SwitchyOmega谷歌商店:chromewebstore.google.com/detail/prox…备用下载地址:github.com/FelisCatus/…官网下载地址:switchyomega.or......
  • 收银软件的这些数据报表可以帮助您制定更有效的营销策略
        这些数据报表可以帮助您更好地了解业务情况和顾客行为,从而制定更有效的营销策略,数据报表是制定有效营销策略的重要工具。通过分析销售数据报表,您可以更好地了解业务情况和顾客行为,从而制定更有效的营销策略。以下是一些利用数据报表制定有效营销策略的方法:锦澄软件小编......
  • Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和
    一、类型(Types)一、OpenPopupOptions1.属性windowId:number可选打开操作弹出式窗口的窗口ID。如果未指定,则默认为当前活动窗口。二、TabDetails1.属性tabId:number可选要查询其状态的标签页ID。如果未指定标签页,则返回非标签页专属状态。三、UserSettin......
  • 新版的Edge浏览器如何设置网络代理?
    这个问题折腾了小半天,通过这种方式希望能帮助他人。版本信息(Linux系统):MicrosoftEdge版本121.0.2277.49(正式版本)beta(64位)根据网上的文档,在“设置”里面既找不到所谓的“高级设置”选项,也找不到所谓的“网络设置”选项,所以压根就找不到设置代理的入口。实在没办法,就自己......
  • 浏览器页面实现读取和存储文件到c盘,是否能实现?
    浏览器页面实现读取和存储文件到c盘,是否能实现?​​vue浏览器页面实现读取c盘判断是否有制定文件目录,如果没有就创建,有就把从后端请求的视频地址下载到制定目录里,是否能实现?https://www.zhihu.com/question/639174474你的思路是错误的,在用户没有授权的情况下无法实现。在......