衡石使用指南嵌入式場景實踐之儀表盤嵌入

應用展示交互

應用集市展示應用時會與儀表盤、圖表進行交互操作，主要包括去分析、保存當前過濾快照、字段設置、刷新、全屏、嵌入、導出等功能。

保存當前過濾快照

儀表盤展示數據時往往使用過濾器來查看不同場景下的分析數據。用戶從一種場景切換到另一種場景，需要調整對應的過濾器選項值。當過濾器較多或用戶展示場景不停變換時，需要頻繁地操作過濾器。

儀表盤保存過濾快照功能可以將不同業務場景篩選條件進行保存，展示時只需要導入對應場景的快照即可，無需再次操作過濾器，快速地實現不同業務場景的切換。如圖所示，用戶 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