利用 Deneb 實現 Custom Visual

在現今數據驅動的商業環境中，Power BI 已成為企業決策的重要工具，但在面對複雜需求時，許多使用者卻常常發現內建的視覺化效果不敷使用。

原生視覺化雖然方便，但在面對高階互動性、自訂效果或是特殊視覺需求時，往往難以滿足企業和分析師的期望。

正因如此，Deneb 這個強大且彈性的自訂視覺效果應運而生。

Deneb 讓使用者可以脫離 Power BI 預設的限制，利用 Vega、Vega-Lite 語法自訂圖表，實現更精緻、更動態的互動效果。

在本文中，我們將聚焦於如何在 Deneb 中實作簡單的長條圖，讓讀者可以了解如何使用 Deneb 繪製客製化視覺效果。

為什麼需要 Deneb？

Power BI 本身提供了許多原生視覺效果（英文：Visual），像是各式各樣的長條圖、折線圖、圓餅圖等，這些圖表足以滿足大部分的資料呈現需求。

然而，當面對一些特定的客製化需求時，原生的視覺效果就可能顯得力不從心。

例如，需要針對互動效果、特殊資料轉換或自訂樣式做出更多調整時，內建功能往往無法全面符合使用者的期望。

這時候，Deneb 就成為一個很好的解決方案。

它能夠突破 Power BI 原生視覺效果的限制，讓我們依據實際需求，自行定義圖表的樣式與互動行為，從而打造出更符合專案需求的客製化報表。

認識 Deneb 與其背後的技術

Deneb 是一個整合於 Power BI 中的客製化視覺效果（Custom Visual），其核心在於利用 Vega-Lite、Vega 語法來設計圖表。

那麼，Vega-Lite 與 Vega 又是什麼呢？

• Vega 與 Vega-Lite：
  Vega 是一種語法，允許開發者以 JSON 格式定義圖表，適用於高度自訂的資料呈現。
  Vega-Lite 則是 Vega 的精簡版，提供更簡單、直觀的語法，使得大部分常見圖表的製作變得輕鬆快速。
  使用 Vega 與 Vega-Lite 則可以讓使用者開發出 SVG 或是 Canvas 的網頁元素，進而呈現在網頁上。
  此外，初學者建議從 Vega-Lite 開始學習。
• Deneb 與 Vega-Lite 的關係：
  Deneb 就是基於 Vega 與 Vega-Lite 語法來產出自訂視覺效果，並將這些圖表整合到 Power BI 中。
  藉由 Deneb，你可以直接在 Power BI 報表中編輯 Vega 或 Vega-Lite JSON 語法，進而實現原生視覺效果無法達成的客製化需求。
  這種方式不僅擴展了報表的呈現可能，也讓我們可以靈活調整互動效果。

總結來說，當 Power BI 的內建視覺效果無法滿足特定需求時，Deneb 提供了一個強而有力的替代方案；而透過學習 Vega-Lite 與 Vega 的基礎概念，我們就能更深入地掌握如何打造出既美觀又符合需求的客製化圖表。

實作：利用 Deneb 建立柱狀圖

接下來的案例將利用 Deneb 與 Vega-Lite 語法繪製長條圖。

雖然說 Deneb 可以產生高度複雜的圖表，但本文的目的在於介紹初學者 Deneb 的開發方式，因此選用長條圖做為案例。

步驟 1：匯入視覺效果

打開一份 Power BI 檔案後，需要前往 AppSource 匯入 Deneb。

請按照以下步驟操作。

1. 點擊「．．．」。
2. 點擊「取得更多視覺效果」。

3. 輸入「deneb」搜尋。
4. 點擊 Deneb 卡片。

5. 點擊「新增」。

6. 確認已新增 Deneb。

步驟 2：介紹資料集

此案例使用的資料如下圖，是一銷售資料表，每一列包含了該筆銷售的詳細資訊。

步驟 3：建立銷售額量值

為了視覺化銷售額結果，我們需要建立銷售額量值如下：

步驟 4：新增 Deneb 視覺效果與加入欄位

7. 在畫布上新增步驟 6 的 Deneb 視覺效果。
8. 加入產品、客戶類型、銷售額欄位。

步驟 5：編輯 Deneb 之 JSON Specification

5.1 開啟全新的 Deneb 介面

9. 選取視覺效果後，到右上方點擊「．．．」。
10. 點擊「編輯」。

11. 選擇「Vega-Lite」。
12. 選擇「[empty]」。
13. 點擊「Create」。

接著會開啟編輯介面，如下圖。

這個介面主要有三個區域：

A：JSON 格式定義區塊。

B：圖表預覽區塊。

C：步驟 8 中放入資料欄位後，背後的資料集。

5.2 啟用 Cross-Highlight & Cross-Filtering

在 Power BI 原生的預設視覺效果中，當點擊一個圖表中的某一個資料點，別的圖表會跟著連動的行為稱為 Cross-Highlight 或 Cross-Filtering。

在 Deneb 中，我們需要將其啟用，方法如下：

14. 切換到「Settings」。
15. 勾選此兩個選項。
16. 會發現 Data 區塊多了以「__highlight」結尾的資料欄位，這個是在 Deneb 中產生的。

5.3 輸入 JSON 程式碼

接著將以下 JSON 程式碼複製並貼上到 5.1 介紹的 A 區塊中。

{
    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
    "data": {
        "name": "dataset"
    },
    "layer": [
        {
            "mark": {
                "type": "bar",
                "opacity": 0.3,
                "tooltip": true
            },
            "encoding": {
                "x": {
                    "field": "產品",
                    "type": "nominal"
                },
                "y": {
                    "field": "銷售額",
                    "type": "quantitative"
                }
            }
        },
        {
            "mark": {
                "type": "bar",
                "tooltip": true
            },
            "encoding": {
                "x": {
                    "field": "產品",
                    "type": "nominal"
                },
                "y": {
                    "title": "銷售額",
                    "field": "銷售額__highlight",
                    "type": "quantitative"
                },
                "opacity": {
                    "condition": {
                        "test": {
                            "field": "__selected__",
                            "equal": "off"
                        },
                        "value": 0
                    },
                    "value": 1
                }
            }
        }
    ],
    "encoding": {
        "x": {
            "axis": {
                "title": "產品",
                "titleFontSize": 18,
                "labelFontSize": 16,
                "labelAngle": 0
            }
        },
        "y": {
            "axis": {
                "title": "總銷售金額",
                "titleFontSize": 18,
                "labelFontSize": 16
            }
        },
        "color": {
            "field": "客戶類型",
            "type": "nominal",
            "legend": {
                "title": "客戶類型",
                "titleFontSize": 18,
                "labelFontSize": 16
            }
        }
    }
}

17. 貼上 JSON 程式碼。
18. 預覽圖表。
19. 點擊「回到報表」。

5.4 完成圖表

完成後的圖表則如下圖所示，可以發現點擊圖上的顏色區塊時，旁邊視覺效果也會跟著被篩選。

結語

透過本文的介紹，我們可以看到 Deneb 在 Power BI 中的強大應用潛力。

利用 Vega-Lite 提供高度自訂化的圖表設計並突破原生視覺效果的限制，Deneb 幫助使用者有效提升報表的表現力與互動性。

對於需要更精緻和專業的數據視覺化的使用者來說，學習並掌握 Deneb 無疑是值得投入的方向。

藉由這次的柱狀圖實作，希望讀者能夠對 Deneb 的操作有初步的了解，並在未來的專案中靈活應用這一工具來滿足各種需求。

Deneb 相關資源

• Deneb 官方網站
• Vega-Lite 範例