应用展示交互

应用集市展示应用时会与仪表盘、图表进行交互操作，主要包括去分析、保存当前过滤快照、字段设置、刷新、全屏、嵌入、导出等功能。

保存当前过滤快照

仪表盘展示数据时往往使用过滤器来查看不同场景下的分析数据。用户从一种场景切换到另一种场景，需要调整对应的过滤器选项值。当过滤器较多或用户展示场景不停变换时，需要频繁地操作过滤器。

仪表盘保存过滤快照功能可以将不同业务场景筛选条件进行保存，展示时只需要导入对应场景的快照即可，无需再次操作过滤器，快速地实现不同业务场景的切换。如图所示，用户 A 是负责东北、华北地区的销售信息。在查看仪表盘时希望过滤器展示的是东北、华北地区的信息，于是将东北、华北的过滤配置保存下来，每次只需要导入快照信息就能看到相应的信息，不需要进行筛选。

保存当前过滤快照操作比较简单，用户在进行过滤器筛选时如果遇到需要保存的快照，点击过滤快照存到临时存放区，当快照窗口关闭时临时区的快照会丢失。在临时区点击保存，可将快照保存到用户系统中（永久区）。再次打开仪表盘时可以在永久存放区找到保存的快照信息。

保存到系统中的快照可以支持设置默认、导入、重命名、删除等操作。

  • 设为默认：将快照中过滤器选项作为过滤器的默认选项值，每次打开仪表盘都会读取快照中的信息，而不是仪表盘初始设置的信息。用户可以通过该功能定制仪表盘展示的业务场景。
  • 导入：仪表盘展示过程中导入快照中的过滤信息，展示相应的数据。
  • 重命名：对过滤快照进行重命名。
  • 删除：删除快照信息。

请注意

  1. 登录状态时，用户保存了过滤快照，则按用户永久保存，下次打开按默认过滤记录进行数据加载。
  2. 未登录状态时，如公开链接、嵌入场景，用户保存了过滤快照，则按浏览器设备进行本地缓存，清除浏览器缓存或更换浏览器或更换电脑再打开仪表盘，则按仪表盘默认状态展示，无过滤快照记录。

字段设置

查看者查看报表时，会将表格中有些不常查看的字段通过字段设置进行隐藏，同时又期望下次打开报表时字段设置就是配置好的状态，当前版本可在表格进行字段设置后使用保存过滤快照功能来保存表格快照。

  1. 字段设置入口

  1. 设置字段是否显示

  1. 调整字段显示顺序

  1. 保存当前字段设置快照

提示

  1. 应用集市中的表格、画布表格、数据集表格，字段设置的字段和排序结果都可以进行保存快照；交叉表不支持字段设置功能。
  2. 移动端表格不支持字段设置功能。

刷新

不使用图表缓存数据，而直接刷新图表数据。

全屏

仪表盘全屏展示。在全屏模式下可设置自动轮播。

嵌入

应用中的仪表盘、图表及应用本身都支持进行嵌入，用户可以根据展示需要进行不同层级的嵌入操作。 应用集市、应用创作中的应用都支持嵌入。

Iframe 嵌入指导

以应用嵌入为例介绍如何进行 Iframe 嵌入，仪表盘、图表嵌入分享过程与应用嵌入类似，这里不详细展开。

  1. 点击应用右上角的嵌入按钮，选择嵌入本应用。

  2. 显示嵌入窗口，包含嵌入的 URL 和 iframe 示例。

  3. 嵌入窗口中的 URL 可以直接分享，用户可直接用该链接在浏览器中展示。如图所示为使用 URL 在浏览器展示的效果。可以看出嵌入页面只有刷新、全屏、导出按钮，没有其他功能操作按钮。

  4. 嵌入窗口中 iframe 提供了在代码中嵌入示例，支持使用各种自定义参数，用户可以通过参数调整嵌入后的展示样式。下图示例是设置嵌入大小为800*600的 iframe 嵌入后的展示效果。

说明

  1. 应用、仪表盘嵌入时仅展示刷新、全屏、导出等按钮，不展示 PC 端等功能按钮。
  2. 图表嵌入时需要先打开图表，然后点击嵌入按钮获取链接内容。
  3. 嵌入时不带入过滤条件。
嵌入场景自定义参数

应用、仪表盘、图表在嵌入时支持多种自定义参数，用户根据需要设定嵌入参数从而影响嵌入后的展示效果。

嵌入图表参数
参数名称使用方法示例描述
noTitle1. noTitle=true
2. noTitle=false
3. 默认设置		设置是否显示标题：
true 不显示标题
false 显示标题
默认设置，显示标题
titleColor1.titleColor=rgb(0, 0, 0)
2.titleColor=rgba(0, 0, 0, 1)
3.titleColor=red
4.titleColor=hsl(0,0,0)		设置图表的标题颜色，不支持 RGB 十六进制颜色设置
chartBackground1.chartBackground=rgb(0, 0, 0)
2.chartBackground=rgba(0, 0, 0, 1)
3.chartBackground=red
4.chartBackground=hsl(0,0,0)
5.chartBackground=transparent		设置图表的背景颜色，不支持 RGB 十六进制颜色设置
参数为“transparent”时，图表显示透明背景色
嵌入仪表盘参数
参数名称使用方法示例描述
copyright1. copyright=true
2. copyright=false
3. copyright=其他值时		是否显示头部底部：
true 显示
false 不显示
默认设置显示
background1.background=rgb(0, 0, 0)
2.background=rgba(0, 0, 0, 1)
3.background=red
4.background=hsl(0,0,0)		仪表盘背景颜色，不支持 RGB 十六进制颜色设置
paddingpadding=5设置边距，单位是像素 px
scrollable1. scrollable=true
2. scrollable=false
3. scrollable=其他值时		仪表盘竖轴滚动条设置：
true，可以滚动
false，不能滚动
其他值，默认设置可以
chartBackground1.chartBackground=rgb(0, 0, 0)
2.chartBackground=rgba(0, 0, 0, 1)
3.chartBackground=red
4.chartBackground=hsl(0,0,0)
chartBackground=transparent		设置图表背景颜色，不支持 RGB 十六进制颜色设置
参数为“transparent”时，为透明背景色
chartGapchartGap=5设置图表间距，单位是像素 px
chartTitleColor1.chartTitleColor=rgb(0, 0, 0)
2.chartTitleColor=rgba(0, 0, 0, 1)
3.chartTitleColor=red
4.chartTitleColor=hsl(0,0,0)		设置图表标题颜色，不支持 RGB 十六进制颜色设置
chartAccessible1. chartAccessible=true
2. chartAccessible=false
3. chartAccessible=其他值时		true 可以打开
false 不可以打开
其他时，默认设置可打开
isMobilename="isMobile"使用该参数时，表示仪表盘按照移动端样式展示。注意如果仪表盘没有对应的移动端展示样式时，使用该参数会报404错误。

JS SDK 嵌入

Iframe 嵌入过程中在浏览器会进行两次渲染，页面加载时间变长。当一个页面嵌入多个图表时，每个图表都要进行两次渲染，导致整个页面加载速度变得很慢，影响页面展示效果。

为了更好地解决仪表盘和图表的嵌入性能问题，系统推出了 JS SDK 嵌入方式，直接在嵌入页面内绘制仪表盘和图表。当同一页面嵌入多个仪表盘或者图表时，每个嵌入页面只加载一次静态资源，相比 iframe 嵌入，大大提升了渲染速度。JS SDK 嵌入时支持动态调整嵌入页面的样式和交互，嵌入方式更加灵活。JS SDK 使用门槛比 iframe 高，需要嵌入人员熟悉 JavaScript。

JS SDK 嵌入示例如下，可分为引入 sdk.js 文件、初始化 sdk、嵌入三部分。

<div id="hst__embed"></div>
<script src="https://develop.hengshi.org/assets/sdk.4.3.0.js"></script>
<script>window.HsEmbedSDK.init({baseUrl: 'https://develop.hengshi.org',}, onReady);function onReady(loginSuccess) {if (!loginSuccess) return;window.HsEmbedSDK.EmbedChart(document.querySelector('#hst__embed'), {width: "1573",height: "948",params: {app: 126457,dashboard: 5,chart: 37,},});}
</script>

引用 SDK 的 js 文件

下面示例是引用 SDK 的 js 文件，每个环境的 SDK 的 js 文件不同。 引用的目的是在嵌入页面的 windows 域上包含全局变量 HsEmbedSDK，为后续绘制嵌入的仪表盘或图表做准备。

<script src="https://develop.hengshi.org/assets/sdk.4.3.0.js"></script>

初始化 SDK

使用 HsEmbedSDK.init 函数初始化 SDK，示例如下。

<script>window.HsEmbedSDK.init({baseUrl: 'https://develop.hengshi.org',}, onReady);function onReady(loginSuccess) {if (!loginSuccess) return;window.HsEmbedSDK.EmbedChart(document.querySelector('#hst__embed'), {width: "1573",height: "948",params: {app: 126457,dashboard: 5,chart: 37,},});}
</script>

初始化时，需要传入两个参数

  • 参数1是 object，结构如下。其中 baseUrl 是系统部署的地址，示例中的https://develop.hengshi.org是一级地址，也支持二级地址。 noAuth 表示是否开启认证，默认为 true 表示开启认证，设置为 false 时表示跳过认证。

interface SDKConfig {baseUrl: string;noAuth?: boolean;
}

  • 参数2是回调函数，示例中的 onReady 是回调函数。

提示

如果使用 jwt 认证 noAuth 需要配置为 true，并且在嵌入的仪表盘或图表中传入 jwt 参数。示例如下：

  window.HsEmbedSDK.init({noAuth: true,baseUrl: 'https://develop.hengshi.org',}, onReady);function onReady(loginSuccess) {if (!loginSuccess) return;window.HsEmbedSDK.EmbedDashboard(document.querySelector('#hst__embed'), {width: window.innerWidth,height: window.innerHeight,params: {app: 125396,dashboard: 1,},location: {query: {activeAuth: 'jwt-param',jwtParam: 'c3MiOiLlj5HooYzogIU6emhlbmdjaHVueGkiLCJzdWIiOiJtYXJzaGFsbCJ9.cCX2yMcMpJYnE4mU7xDewD22uCyj-o'},},});}

嵌入仪表盘/图表

在引用 SDK 的 js 文件、初始化 SDK 后，开始嵌入应用的仪表盘和图表。

提示

嵌入多个仪表盘和图表时，只需要在第一次嵌入时引用 SDK 的 js 文件、初始化 SDK。 应用、仪表盘嵌入时仅展示刷新、全屏、导出等按钮，不展示 PC 端等功能按钮。 图表嵌入时需要先打开图表，然后点击嵌入按钮获取链接内容。 嵌入时不带入过滤条件。 JS SDK 初步支持分析应用中仪表盘和图表的嵌入，后续版本会不断扩充支持的嵌入范围。

嵌入仪表盘

使用 HsEmbedSDK.EmbedDashboard(Element, DashboardOptions)函数进行仪表盘嵌入，需要传入 Element 和 DashboardOptions 两个参数。在仪表盘中点击嵌入图标，选择嵌入本仪表盘，查看嵌入示例。

  • Element 为嵌入的 DOM 元素，可以从嵌入示例中获取。示例中传入的 Element 为document.querySelector('#hst__embed')。

  • DashboardOptions 为仪表盘相关参数，结构体如下。

    • useshadowDom：使用 shadow DOM 来做样式隔离，布尔类型，默认为 true，该项为非必填项。
    • width ：仪表盘嵌入后的宽度，数值类型，单位是 px，该项为必填项。
    • height：仪表盘嵌入后的高度，数值类型，单位是 px，该项为必填项。
    • params： 仪表盘所在应用 ID 和仪表盘 ID，可以从嵌入示例中获取，该项为必填项。
    • location：需要在 url 添加过滤器参数时，可以通过 location.query 来传入参数，该项为非必填项。

interface Dashboardoptions {useshadowDom?: boolean;width: number;height:number;params:{app: number | string;dashboard: number | string;};location?:{query?: string | Record<string, any>;},
}

嵌入图表

使用 HsEmbedSDK.EmbedChart(Element, ChartOptions)函数进行图表嵌入，需要传入 Element 和 ChartOptions 两个参数。打开图表点击嵌入图标，查看图表嵌入参考示例。

  • Element 为嵌入的 DOM 元素，可以从嵌入示例中获取。 示例中传入的 Element 为document.querySelector('#hst__embed')。

  • Chartoptions 为图表相关参数，结构体如下。

    • useshadowDom：使用 shadow DOM 来做样式隔离，布尔类型，默认为 true，该项为非必填项。
    • width ：图表嵌入后的宽度，数值类型，单位是 px，该项为必填项。
    • height：图表嵌入后的高度，数值类型，单位是 px，该项为必填项。
    • params：图表所在应用 ID、仪表盘 ID、图表 ID，可以从系统提供的嵌入参考示例中获取，该项为必填项。
    • location：需要在 url 添加过滤器参数时，可以通过 location.query 来传入参数，该项为非必填项。
    interface Chartoptions{useShadowDom?: boolean;width: number;heiqht:number;params:{app: number | string;dashboard: number | string;chart: number | string;};location?:{query?:string | Record<string, any>;},
}

清除联动过滤

JS SDK 支持使用函数 HsEmbedSDK.clearFilters()清除图表之间的联动过滤。调用该函数后，图中所示的联动过滤将清除，图表之间不会产生联动。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/diannao/95943.shtml
繁体地址，请注明出处：http://hk.pswp.cn/diannao/95943.shtml
英文地址，请注明出处：http://en.pswp.cn/diannao/95943.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Qt | 四种方式实现多线程导出数据功能

Qt | 四种方式实现多线程导出数据功能

前言 在以往的项目开发中&#xff0c;在很多地方用到了多线程。针对不同的业务逻辑&#xff0c;需要使用不同的多线程实现方法&#xff0c;来达到优化项目的目的。本文记录下在Qt开发中用到的多线程技术实现方法&#xff0c;以导出指定范围的数字到txt文件为例&#xff0c;展示…
阅读更多...
运放的学习笔记以及一些用法的个人看法

运放的学习笔记以及一些用法的个人看法

负反馈形成了虚短。 你的输出会对-极产生一个向上的电压&#xff0c;当你的-的时候就两边相等了&#xff0c;这个时候就输出就不变了&#xff0c;也就是负反馈调节&#xff0c;调节了左边的电压差 如果你的右边输出已经达到了12v或者0v这个时候你就饱和了&#xff0c;这个时候…
阅读更多...
MySQL的三大范式：

MySQL的三大范式：

目录 键和相关属性的概念&#xff1a; 第一范式&#xff1a; 第二范式&#xff1a; 第三范式&#xff1a; 总结&#xff1a; 反范式化&#xff1a; 在关系型数据库中&#xff0c;关于数据表设计的基本原则&#xff0c;规则就称为范式。 范式是关系数据库理论的基础&…
阅读更多...
如何解决pip安装报错ModuleNotFoundError: No module named ‘imageio’问题

如何解决pip安装报错ModuleNotFoundError: No module named ‘imageio’问题

【Python系列Bug修复PyCharm控制台pip install报错】如何解决pip安装报错ModuleNotFoundError: No module named ‘imageio’问题 摘要 在Python开发过程中&#xff0c;尤其是使用PyCharm等IDE时&#xff0c;遇到pip install报错是一个常见的问题&#xff0c;尤其是在执行安装…
阅读更多...
2025年高效能工程项目管理软件推荐榜单：AI重构工程进度可视化与资源动态调度体系

2025年高效能工程项目管理软件推荐榜单：AI重构工程进度可视化与资源动态调度体系

在工程行业数字化深度变革的2025年,项目管理正面临前所未有的挑战与机遇。权威数据显示,68%的工程项目因进度追踪滞后导致交付延期,超半数企业因数据孤岛陷入跨部门协同效率低下的困境,而资源错配造成的隐性成本损失高达年度预算的15%。随着AI决策引擎、BIM全流程融合、IoT物联…
阅读更多...
豆包 Java的23种设计模式

豆包 Java的23种设计模式

Java的23种设计模式是软件开发中常用的设计思想总结&#xff0c;根据用途可分为三大类&#xff1a;创建型、结构型和行为型。 一、创建型模式&#xff08;5种&#xff09; 用于处理对象创建机制&#xff0c;隐藏创建逻辑&#xff0c;使程序更灵活。 单例模式&#xff1a;保证一…
阅读更多...
Redis7学习--详解哨兵，文件配置、主客观下线

Redis7学习--详解哨兵，文件配置、主客观下线

目录 一、前言 二、哨兵 1、是什么&#xff1f; 2、哨兵的功能 3、案例演示 Redis Sentinel 架构 配置说明 哨兵配置文件 主从配置文件 主节点宕机后各节点状态 主从切换后配置文件的自动调整 4、哨兵运行流程和选举原理 SDOWN主观下线 ODOWN客观下线 选出新的主节…
阅读更多...
Android 项目:画图白板APP开发（二）——历史点、数学方式推导点

Android 项目:画图白板APP开发（二）——历史点、数学方式推导点

上一章我们讲解了如何绘制顺滑、优美的曲线&#xff0c;为本项目的绘图功能打下了基础。本章我们将深入探讨两个关键功能的实现&#xff1a;历史点和数学方式推导点。这些功能将大幅提升我们白板应用的专业性和用户体验。一、History点之前在onTouchEvent中获取的MotionEvent&a…
阅读更多...
25. for 循环区别

25. for 循环区别

1. 基本 for 循环 for (let i 0; i < 10; i) {console.log(i); }特点&#xff1a; 适用于已知循环次数的情况使用数字索引进行迭代可以精确控制循环过程性能最好&#xff0c;开销最小 2. for…in 循环 // 数组示例 for (let i in [1, 2, 3]) {console.log(i, typeof i); //…
阅读更多...
Trae 辅助下的 uni-app 跨端小程序工程化开发实践分享

Trae 辅助下的 uni-app 跨端小程序工程化开发实践分享

大家好&#xff0c;我是不如摸鱼去&#xff0c;欢迎来到我的AI编程分享专栏。 这次来分享一下&#xff0c;我使用 Trae 作为主要AI编程工具&#xff0c;开发 uni-app 跨平台小程序的完整实践经验。我在实际的开发过程中&#xff0c;探索了 Trae 辅助开发的具体应用场景和效果&…
阅读更多...
Vue3 + Element Plus 人员列表搜索功能实现

Vue3 + Element Plus 人员列表搜索功能实现

设计思路使用Element Plus的el-table组件展示人员数据 在姓名表头添加搜索图标按钮 点击按钮弹出搜索对话框 在对话框中输入姓名进行搜索 实现搜索功能并高亮匹配项下面是完整的实现代码&#xff1a;<!DOCTYPE html> <html lang"zh-CN"> <head><…
阅读更多...
告别手动优化！React Compiler 自动记忆化技术深度解析

告别手动优化！React Compiler 自动记忆化技术深度解析

概述 React Compiler 是 React 团队开发的一个全新编译器&#xff0c;目前处于 RC&#xff08;Release Candidate&#xff09;阶段。这是一个仅在构建时使用的工具&#xff0c;可以自动优化 React 应用程序&#xff0c;无需重写任何代码即可使用。 核心特性 自动记忆化优化 …
阅读更多...
【从零开始学习Redis】项目实战-黑马点评D2

【从零开始学习Redis】项目实战-黑马点评D2

商户查询缓存 为什么用缓存&#xff1f;作用模型缓存流程按照流程编写代码如下 Service public class ShopServiceImpl extends ServiceImpl<ShopMapper, Shop> implements IShopService {Resourceprivate StringRedisTemplate stringRedisTemplate;Overridepublic Resul…
阅读更多...
后端Web实战-MySQL数据库

后端Web实战-MySQL数据库

目录 1.MySQL概述 1.1 安装 1.1.1 版本 1.1.2 安装 1.1.3 连接 1.2 数据模型 1.3 SQL简介 1.3.1 分类 1.3.2 SQL通用语法 2.DDL 2.1 数据库操作 2.2 图形化工具 2.2.1 使用 2.3 表操作 2.3.1 创建表 2.3.1.1约束 2.3.1.2 数据类型 2.3.1.3 案例 2.3.2 DDL&am…
阅读更多...
开源数据发现平台：Amundsen 本地环境安装

开源数据发现平台：Amundsen 本地环境安装

Amundsen 是一个数据发现和元数据引擎&#xff0c;旨在提高数据分析师、数据科学家和工程师与数据交互时的生产力。目前&#xff0c;它通过索引数据资源&#xff08;表格、仪表板、数据流等&#xff09;并基于使用模式&#xff08;例如&#xff0c;查询频率高的表格会优先于查询…
阅读更多...
ubuntu18.04部署cephfs

ubuntu18.04部署cephfs

比起君子讷于言而敏于行&#xff0c;我更喜欢君子善于言且敏于行。 目录 一. 准备工作&#xff08;所有节点&#xff09; 1. /etc/hosts 2. 安装python2 3. 配置普户免密sudo 4. 准备好四块盘&#xff0c;一块hddsdd为一组&#xff0c;一台设备上有一组 5. 添加源 二. 安…
阅读更多...
VMD+皮尔逊+降噪+重构（送报告+PPT）Matlab程序

VMD+皮尔逊+降噪+重构（送报告+PPT）Matlab程序

1.程序介绍:以含白噪声信号为例&#xff1a;1.对信号进行VMD分解2.通过皮尔逊进行相关性计算3.通过设定阈值将噪声分量和非噪声分量分别提取出4.对非噪声信号进行重构达到降噪效果包含评价指标&#xff1a;% SNR&#xff1a;信噪比% MSE&#xff1a;均方误差% NCC&#xff1a;波…
阅读更多...
UE5多人MOBA+GAS 45、制作冲刺技能

UE5多人MOBA+GAS 45、制作冲刺技能

文章目录添加技能需要的东西添加本地播放GC添加冲刺tag添加一个新的TA用于检测敌方单位添加冲刺GA到角色中监听加速移动速度的回调创建蒙太奇添加GE添加到数据表中添加到角色中纠错添加技能需要的东西 添加本地播放GC 在UCAbilitySystemStatics中添加 /*** 在本地触发指定的游…
阅读更多...
分库分表和sql的进阶用法总结

分库分表和sql的进阶用法总结

说下你对分库分表的理解分库分表是⼀种常⽤的数据库⽔平扩展&#xff08;Scale Out&#xff09;技术&#xff0c;⽤于解决单⼀数据库性能瓶颈和存储容量限制的问题。在分库分表中&#xff0c;数据库会根据某种规则将数据分散存储在多个数据库实例和表中&#xff0c;从⽽提⾼数据…
阅读更多...
紫金桥RealSCADA：国产工业大脑，智造安全基石

紫金桥RealSCADA：国产工业大脑，智造安全基石

在工业4.0时代&#xff0c;数字化转型已成为企业提升竞争力的核心路径。作为工业信息化的基石&#xff0c;监控组态软件在智能制造、物联网、大数据等领域发挥着关键作用。紫金桥软件积极响应国家“两化融合”战略&#xff0c;依托多年技术积淀与行业经验&#xff0c;重磅推出跨…
阅读更多...
最新文章

Copyright @ 2022~2023