首页 > 其他分享 >如何在前端大屏展示中实现真正的自助

如何在前端大屏展示中实现真正的自助

时间:2022-12-29 23:11:32浏览次数:41  
标签:前端 全选 参数 自助 大屏 可视化 数据 仪表板

数据可视化大屏的真正做用是什么?

数据可视化:Data Visualization,即与视觉传达, 定义:为了清晰有效地传递信息,数据可视化使用统计图形、图表、信息图表和其他工具。可以使用点、线或条对数字数据进行编码,以便在视觉上传达定量信息。

BI 工具是提供的是一套完整的数据解决方案,将业务数据进行有效的整合,建模,分析,以可视化的方式呈现,快速准确的定位关键数据,辅助决策。 因此BI工具的最后一个环节是将关键业务可视化的呈现后进行数据分析。因此BI工具的提供的让大家最直观感受的功能,那就是数据可视化大屏。尤其是以国内的用户偏好,更会因为大屏的直观感受,来判断产品的能力,即一屋不扫何以扫天下,也是有一定道理的。

但是数据可视化大屏的角色绝不限于“好看的花瓶”,它应该对最终使用用户而言,是非常有效直接的数据分析工具。

因此数据可视化大屏需要满足以下三个特征才是真正意义上的大屏能力:

  • 美观性,美观性会直接决定对大家带来视觉冲击力,影响用户对于产品印象和评价,是不是科技感,设计感,符合业务特点
  • 写实性,是不是按照物理模型,建立了等比例缩小的园区,机械,地图等,需要根据实际所管理的物理场景来显示实时数据,才能保证大屏的有效性,和真正的发挥作用。
  • 自助分析能力:大屏的由来最终于是解决分析的需求,因此大屏真正核心的本质是能够服务于数据分析,让真正的数据用户,按照自己的思维逻辑在大屏中操作分析数据,辅助决策,这就决定了大屏需要为用户提供“自助式分析能力”。

什么是自助式分析

自助式数据分析需要体现到四个层次:

  1. 自助数据准备:很多业务用户未具备专业的IT技能,因此在实现数据分析的过程中,最让他们耗费时间最多的就是如何对接实际的业务数据,因此自助式分析第一步要解决,自助数据准备,自助完成数据准备,并能关联本地数据,为数据分析提供更完备数据支持,通过简单易用的数据准备器,拖拽完成即可实现多业务表的关联,无需理解背后的IT 技术。
  2. 可视化化设计分析:以拖拽方式完成数据分析、管理看板和数据大屏的设计需要。
  3. 自由数据探索:通过数据联动、钻取、筛选等探索分析操作,发掘数据价值和原因
  4. 分享与发布:用户可以将分析结果分享给其他同事,扩大数据应用范围、加速企业数据文化的建立

自助式分析之实践:

  1. 通过数据分析,打开大屏中附链的文件资源

应用场景: 很多情况下智慧政务或企业涉及到标准的文稿通知等会有专用的文件,会附加的大屏中供需要的用户浏览或下载,因此需要在查看大屏时能够打开对应本地文件。

2.  发布文档:
先把要访问的文件发布到服务内,使其可以通过浏览器访问。我们需要将文件放在安装目录下:\Wyn\Server\wwwroot

通过浏览器访问:
![Graphical user interface, application, table

Description automatically generated](Aspose.Words.b4434f23-7f01-4787-970f-95e3a5a11237.004.png)

  1. 访问 PDF文档:
    3.1 创建报表,创建任意报表,通过报表的钻取功能跳转到文档:

3.2 设置跳转 url。
发布的 PDF 的访问地址:http://localhost:51980/data/4-表达式和条件格式化.pdf

3.3 预览

3.4 仪表板:仪表板设置前面都一样,最后是通过外部链接做的

3.5 预览

  1. 从大屏到数据明细报表中的跳转,实现明细数据分析

当使用仪表板跳转报表有时需要传参数,这个传参可以来自于筛选器。然后把筛选器选择的数据传递给报表当作参数。
但是当我们点击全选的时候,会发现跳转报表没有接收到任何参数。
这是因为我们仪表板的筛选器在全选的时候会默认当成未筛选,所以不会传值。那问题就来了,我全选怎么做到参数传递的。那就得绕一下了
我们以传递客户地区为例:
5.创建一个仪表板,设置一个多维下拉框筛选器,绑定客户地区。然后创建一个用于跳转的图表。

6.创建一个仪表板参数,设置如下,默认数据给一个全选。然后筛选器绑定我们设置的筛选器。

7.设置跳转,然后这里的参数选择仪表板参数,不要选择筛选器参数。

8.然后仪表板需要设计的就没了,之后就是报表模块,我们先设计一个报表,然后需要一个参数。需要设置可选参数,可选参数就是我们需要的参数的列举。用sql专门查一列即可,可以参考下图数据集2.然后参数设置全选那里输入全选。也就是当我们输入内容为全选的时候他会查询全部,这就对应了仪表板那边参数的默认值。

9.也是最后一步,也就是我们的被查询的数据源的sql需要对参数进行一个判断。参考如下:
select * from 销售明细  where '全选' in (@查询参数1) or 销售大区 in (@查询参数1)

至此设计就完成了,看一下成果吧

标签:前端,全选,参数,自助,大屏,可视化,数据,仪表板
From: https://www.cnblogs.com/powertoolsteam/p/17013766.html

相关文章

  • 前端知识总结
    前端知识总结: 1.查看元素大小右键--检查--elements---光标防止到对应元素上(如图中圈中),页面显示大小。 ......
  • 前端jsp界面一些固定模板
    <%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%><%@tagliburi="http://java.sun.com/jsp/jstl/core"prefix="c"%><ht......
  • Web前端学习笔记3——列表与表单
    无序列表无序列表的标签:<ul></ul>无序列表列表项的标签:<li></li>ul标签中只能嵌套li标签,不能存放别的标签或者数字,li标签之中可以存放任何元素和标签无序列表会默认在......
  • Web前端学习笔记2——表格
    表格的基本语法以及标签表格示例1:table标签就是表格的标签,用来建立一个表格tr标签表示行,一个<tr></tr>标签就是一行td标签表示数据单元格的内容,可以理解为列th标签为......
  • 记:后端对字符串进行gzip压缩,前端js进行gzip解压
    最近有个需求要求对长字符串进行gzip压缩,然后在js进行解压缩的操作:publicstaticvoidmain(String[]args){try{StringlongString="www.baidu.com";......
  • 在前端js worker里使用dom并且加载jquery
    四个工具:nodejs+npmnpm安装的jsdomnpm安装的jquerynpm安装的browserify网址:browserify:https://browserify.org/jsdom:https://github.com/jsdom/jsdom/安......
  • TypeScript 前端工程最佳实践
    作者:王春雨前言随着前端工程化的快速发展,TypeScript变得越来越受欢迎,它已经成为前端开发人员必备技能。TypeScript最初是由微软开发并开源的一种编程语言,自2012年10......
  • 【前端vue开发架构】vue开发单页项目架构总结
    活动设计的前端架构主要的技术栈为Vuejs,Webpack,请自行阅读如下技术或者框架的文档:一、基础说明:node (https://nodejs.org/en/)npm(​​https://www.npmjs.com​​)webpac......
  • 前端万字面经——进阶篇
    此文为前端进阶篇前边已经出了基础篇​​基础篇链接点击跳转​​服务端编程/AjaxJSONP的缺点JSON只支持get,因为script标签只能使用get请求;JSONP需要后端配合返回指定格......
  • 04-前端技术_CSS与CSS3美化页面
    目录​​二,CSS与CSS3美化页面​​​​1,CSS简介​​​​1.1 什么是CSS?​​​​1.2 样式层叠次序​​​​2,CSS基础语法​​​​2.1介绍​​​​2.2注释​​​​3,CSS使用......