企业做网站优点,成都营销型网站制作公司,如何免费搭建网站,南宁网站建设优化排名前言
如今各类BI产品大行其道#xff0c;“数据可视化”成为一个热门词汇。相比价格高昂的各种BI软件#xff0c;用Excel来制作动态报表就更加经济便捷。今天小编就将为大家介绍一下如何使用葡萄城公司的纯前端表格控件——SpreadJS来实现一个Excel动态报表#xff1a;
实…前言
如今各类BI产品大行其道“数据可视化”成为一个热门词汇。相比价格高昂的各种BI软件用Excel来制作动态报表就更加经济便捷。今天小编就将为大家介绍一下如何使用葡萄城公司的纯前端表格控件——SpreadJS来实现一个Excel动态报表
实现步骤
1.在原始数据的基础上生成数据透视表
制作这样的数据大屏首先必须要明确目的比如在这里围绕销售金额制作一个数据大屏首先点击数据源然后点击插入找到数据透视表随后将年份放在行字段然后将销售金额放在值字段因为在这里数值比较大可以选择销售金额这一列数据然后按快捷键Ctrl 1调出格式窗口点击自定义将类型设置为0!.0,这样的话就变为了万元显示然后在设计中找到总计选择对行和列禁用将数据透视表中的总计禁用掉。 2.根据数据生成图表
选择数据区域然后在图表中找到饼图随后为饼图添加数据标签紧接着点击标签按Ctrl 1调出格式窗口勾选类别名称然后将分隔符设置为新的文本行最后将无用的图例删掉即可至此的第一个图表就制作完毕了。
为了添加更多图表复制刚才设置的数据透视表在复制的数据透视表中将年份这个字段拖走然后将省份这个字段放在行字段最后将数字更改为万元显示然后插入一个横向的条形图将无用的图例删除掉即可。需要注意的是你需要设置几个图表就需要复制几次数据透视表更改为自己需要的字段最后插入图表在这里就以3个为例跟大家演示制作方法。
为了让多张图表能够联动变化点击数据透视表在工具栏中找到插入切片器然后分别勾选年份省份厂商点击确定这样的话就插入了3个切片器随后将他们更改下大小放在合适的位置即可。随后点击一个切片器在切片器选项中选择链接到报表勾选其他的两个报表即可以此类推其余的2个切片器也需要这样设置设置完毕后就制作完毕了。
至此一张简单的可视化数据报表就制作好了。有时候制作好的可视化报表需要通过网络让更多的人查阅那么有什么好办法呢
实现在线化
下面小编为大家介绍如何使用借助SpreadJS实现在线化查看
首先打开SpreadJS的学习指南
按照学习指南上的代码进行编程实践
!DOCTYPE html
html
headmeta charsetUTF-8titleSpread-CDN/titlelink relicon href./assets/images/logo.png typeimage/x-iconlinkhrefhttps://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets/styles/gc.spread.sheets.excel2013white.cssrelstylesheet typetext/css /script typetext/javascriptsrchttps://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets/dist/gc.spread.sheets.all.min.js/scriptscriptsrchttps://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js/scriptscriptsrchttps://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js/scriptscriptsrchttps://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-slicers/dist/gc.spread.sheets.slicers.min.js/scriptscriptsrchttps://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-print/dist/gc.spread.sheets.print.min.js/scriptscriptsrchttps://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-barcode/dist/gc.spread.sheets.barcode.min.js/scriptscriptsrchttps://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-pdf/dist/gc.spread.sheets.pdf.min.js/scriptscriptsrchttps://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js/scriptscriptsrchttps://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js/scriptscriptsrchttps://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-ganttsheet/dist/gc.spread.sheets.ganttsheet.min.js/scriptscriptsrchttps://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-formula-panel/dist/gc.spread.sheets.formulapanel.min.js/scriptscriptsrchttps://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-excelio/dist/gc.spread.excelio.min.js/scriptscriptsrchttps://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-io/dist/gc.spread.sheets.io.min.js/scriptscriptsrchttps://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js/scriptscriptGC.Spread.Common.CultureManager.culture(zh-cn)/scriptstyle* {margin: 0;padding: 0;}#app {overflow: hidden;}#spread-container {width: 100vw;height: 100vh;}/style
/head
body
input typefile idfile/
div idappdiv idspread-container/div
/divscriptconst 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发展历程与应用前景解析
从表单驱动到模型驱动解读低代码开发平台的发展趋势
低代码开发平台是什么
基于分支的版本管理帮助低代码从项目交付走向定制化产品开发
