使用 Deneb 為 LuckyTemplates 製作自定義視覺對象

我想談談最近為 LuckyTemplates 發布的新 Deneb 自定義視覺對象。這為 Vega-Lite 語言提供了一個接口，用於為 LuckyTemplates 創建交互式自定義視覺對象。

Vega-Lite 語言基於 JSON 語法。它比低級編程語言更容易實現和理解。此外，作者 Daniel Marsh-Patrick 還提供了一些模板來加速設計過程。

我認為這種視覺效果會非常巨大，因為它提供了完整的代碼體驗並且高度可定制。我想藉此機會展示 Deneb Vega-Lite 視覺效果的幾個簡單示例，並將其與標準 LuckyTemplates 視覺效果進行比較。您可以在本博客底部觀看本教程的完整視頻。

目錄

• 如何將 Deneb 用作 LuckyTemplates 的自定義視覺對象
• 了解天津四的一般要點
• 使用 Deneb 創建條形圖
• 用天津四製作折線圖
• 用 Deneb 製作面積圖
• 使用 Deneb 的重疊柱形圖
• 使用 Deneb 生成環圖
• 結論

如何將 Deneb 用作 LuckyTemplates 的自定義視覺對象

Deneb 是一個界面，允許根據 Vega-Lite 語言使用 JSON 語法對視覺對象進行完全編碼。此演示文稿的目的不是介紹 Vega-Lite 語言，而是一個小展示，展示該語言如何實現類似於某些標準 Power BI 視覺效果的視覺效果，並且可以完全自定義以適合您的場景。

本演示文稿中開發的基本視覺效果利用了 Deneb 界面中可用的一些示例模板。自定義視覺效果是介紹性示例，通過對可以在網上輕鬆找到的其他示例進行反複試驗和錯誤修改，在 Vega-Lite 中只需付出少量努力即可完成。

這是 Deneb 的主頁。您可以在這裡找到一些參考資料。

Vega-Lite GitHub 站點上提供了一個畫廊，展示了可以使用 Vega-Lite 創建的事物的示例。

這是可以使用 Deneb 自定義視覺對象創建的一些自定義 KPI 卡的另一個示例。

了解天津四的一般要點

以下是我在初步調查期間了解到的關於 Vega-Lite 的一些一般要點。數據與標記相關聯。Vega-Lite 中有許多可用的標記，包括條、線、弧、點、文本等等。標記具有編碼。例如，文本標記有許多可用的編碼，包括對齊方式、字體、大小、粗細和顏色。

可以組合多個標記以創建複合視覺體驗，包括層（多個標記彼此重疊並共享相同的錨點或軸）、連接（多個標記水平或垂直排列）或面（許多 LuckyTemplates 中可用的小倍數）視覺效果，其中一系列相似的圖用於顯示相同數據的子集，便於子集之間的比較）。

使用 Deneb 創建條形圖

現在讓我們來看看如何使用 Deneb 的模板為 LuckyTemplates 創建自定義視覺對象，以及它們與標準 LuckyTemplates 視覺對象的比較。

在此示例中，我添加了一個標準的 LuckyTemplates 條形圖以在左側按渠道顯示總銷售額。讓我們使用 Deneb 和 Vega-Lite 構建類似的東西。

我們將在右側添加天津四視覺效果。

我們需要做的第一件事是添加我們的數據，所以讓我們添加我們的Channels和Total Sales。

只是為了好玩，讓我們打開Shadow。

然後我們選擇Edit。

我們將選擇界面中提​​供的簡單條形圖模板。對於類別，我們選擇Channel，對於度量，我們選擇Total Sales。

單擊Create後，我們可以看到我們的 Deneb 視覺效果。

我們可以看到 LuckyTemplates 和 Deneb 之間有很多相似之處。開箱即用的不同之處在於，我們在 LuckyTemplates 視覺對像上顯示了數據標籤。對於天津四視覺，這些數據標籤可以很容易地添加到視覺中，我們將通過添加不同的圖層來完成。

在 Deneb 視覺效果中單擊“編輯”後，我們會在此處看到一個標記。

我將獲取一個代碼片段來添加數據標籤，並將單個標記的代碼替換為兩個標記。

一旦我們運行它，我們就會有數據標籤。

我們可以做的第二件事是格式化這些數據標籤。同樣，我在這裡有一個引號塊，我可以將其放入而不是僅使用Total Sales的裸編碼。

Deneb 和 Vega-lite 的另一個真正酷的地方是我們可以輕鬆地將條形圖更改為柱形圖。讓我們再次點擊編輯。我們需要做的就是翻轉 X 和 Y。

顯然，還有一些工作要做並且需要進行調整，但我想展示一下在 Vega-Lite 中更改內容是多麼容易。

用天津四製作折線圖

接下來，我添加了一個標準的 LuckyTemplates 折線圖，按日期顯示 Total Sales。讓我們使用 Deneb Vega-lite 構建類似的東西。讓我們添加一個 Deneb 視覺對象，添加我們的Date和Total Sales。

讓我們選擇一個帶有區間帶的折線圖，為我們的 X 軸選擇日期，然後為接下來的三個值選擇總銷售額。

這是 Deneb 的最終基礎視覺效果。你可以看到兩者之間有很多相似之處。存在一些差異，例如在 Deneb 視覺中以數字顯示 X 軸。

我們可以做一些事情來輕鬆解決這個問題。讓我們轉到 Deneb 並將 X 日期的編碼更改為temporal。

第二個區別是標題。讓我們為 Deneb 視覺對象添加一個標題。我們將再次編輯代碼，添加標題欄，並格式化 JSON。

這是我們的標題。我們可以完全控制標題的字體、大小、顏色等。

用 Deneb 製作面積圖

讓我們也試試面積圖。我添加了一個標準的 LuckyTemplates 面積圖，顯示按日期計算的累計總銷售額。

現在讓我們使用 Deneb Vega-Lite 構建類似的東西。讓我們放入 Deneb 視覺對象，然後添加Date和Cumulative Total Sales度量。

讓我們獲取獨立面積圖的代碼塊並應用它。

底部的面積圖是結果。

Vega-Lite 的附加功能之一是您可以使用畫筆。這是他們用來在圖表上選擇特定時間間隔的詞。

其中一件非常酷的事情是您可以在鏈接的視覺效果上使用畫筆。讓我們創建一個新的 Deneb 視覺對象，添加相同的數據 Of Date和Cumulative Sales。單擊視覺對像上的編輯，然後選擇Empty Specification。

複製由矩形畫筆鏈接的雙圖表代碼。然後粘貼並運行代碼。

我們現在有了主要視覺效果，我們可以在其中使用畫筆顯示從第一個視覺效果到次要視覺效果的選定間隔。

使用 Deneb 的重疊柱形圖

這是我一直在尋找的東西的一個例子。這是一個重疊的柱形圖或柱形項目符號圖，展示了同一類別的兩個值之間的關係。我也在 Deneb 中創建了這個。

我從 Notepad++ 添加了一些代碼，使重疊列可視化。

我們這裡有一個四層視覺效果，由四層相互疊加組成：一層用於後列，一層用於前列，一層用於後標籤，一層用於前標籤。我們可以看到圖表響應在 LuckyTemplates 中所做的選擇，並相應地進行調整。

使用 Deneb 生成環圖

我一直在尋找的另一件事是類似於 Apple Watch 上的活動環的環圖。創建了類似的東西，但它並不像我希望的那樣好。

我試圖在天津四做同樣的事情並且非常成功。在此 Deneb 視覺效果中，我們有一個九層視覺效果，其中我們為1、2 和 3 環添加了單獨的度量，為 1、2 和3 環添加了值，為 1、2 和 3 環添加了顏色，以及類別對於環 1、2 和 3。

讓我們看看我在這裡使用的代碼。它使用 Vega-Lite 中稱為Transform和Params的概念來擴展可用於各種標記的數據。然後我使用相同的軸將九個標記層疊在一起以創建環形圖。這與 LuckyTemplates 工具提示完全交互。

另一件有趣的事情是，您可以使用Visual Studio Code來開發 Vega-Lite 視覺效果。首先，您需要一個擴展程序來查看 Vega-Lite 代碼。我目前正在使用Vega Viewer 擴展。

然後您需要設置一個擴展名為 vl.json 的技術文件。只需右鍵單擊代碼即可預覽Vega Graph。

由於 Vega-Lite 視覺是一種完整的代碼體驗，我實際上發現 Visual Studio Code 環境在我的開發中非常有用。

結論

我希望您覺得本教程很有啟發性，它會讓您探索使用 Deneb 和 Vega-Lite 開發超出 LuckyTemplates 當前可用內容的可視化效果的可能性。

如果您喜歡本特定教程中涵蓋的 LuckyTemplates 內容的自定義視覺對象，請不要忘記訂閱LuckyTemplates 電視頻道​​。

我和一系列內容創作者一直在發布大量內容，所有內容都致力於改進您使用 LuckyTemplates 和 Power Platform 的方式。

格雷格