【BI 可視化插件】怎麼做? 手把手教你實現

背景

對於現在的用戶來說,插件已經成爲一個熟悉的概念。無論是在使用軟件、 IDE 還是瀏覽器時,插件都是爲了在原有產品基礎上提供更多更便利的操作。在 BI 領域,圖表的豐富性和對接各種場景的自定義是最吸引人的特點。雖然市面上現有的 BI 軟件內置了許多圖表組件和自定義屬性設置,但對於多元化的需求來說,仍然會有無法滿足需求的地方。因此,爲了更好地滿足用戶多元化地需求,插件應運而生。那要怎麼才能在 BI 軟件中 DIY 一個插件呢?

1、開發環境準備及工程創建

首先我們需要準備開發的環境:

開發環境準備完之後,安裝依賴並創建一個插件工程:

//安裝依賴
npm i @grapecity/wyn-visual-tools -g
//創建工程
wyn-visual-tools init

創建的工程目錄結構如下所示:

2、開發和調試

創建好後就可以做開發了。從上面可以介紹可以知道,src/visual.ts是自定義可視化插件的入口。所以我們所有的開發都是在這個裏面實現。開發時我們使用 wyn-visual-tools develop 進行啓動調試(如下圖所示)。項目運行過程中,點擊刷新按鈕就可以查看本地運行的工程。

而所有的開發,都是在src/visual.ts中實現的。每次圖表加載,數據綁定以及屬性修改,都是執行visual.ts。並且在其中我們也可以獲取到所有綁定的數據以及右側的屬性操作。那麼接下來我們大概看一下visual.ts的結構:

構造函數就是在組件被拖出來時,每次初始化加載一次,一般用來做一些全局對象、事件的初始化定義等。

Update():這個方法會在每次組件更新時執行,包括組件第一次加載、數據更新、數據字段更改,屬性更改時,都會更新,並且通過他的參數我們就可以獲取到所有的數據以及看板右側的屬性。也是我們主要邏輯實現的地方。

OnDestory():OnDestory是在組件被銷燬時,將註冊的相關事件做銷燬。

GetInspectorHiddenState():隱藏右側的所有屬性設置。

GetActionBarHiddenstate():隱藏組件旁邊的屬性設置。

3、打包上傳

開發和調試完之後,我們可以將項目打包並上傳到 Wyn商業智能軟件設計器中。

打包指令:

wyn-visual-tools.cmd package

輸入打包指令後,會在同級目錄下生成一個 ***.viz的文件,而這個文件就可以直接在 Wyn商業智能軟件設計器的門戶上傳,上傳之後就會生成一個插件。

開發案例

下面小編藉助 Echarts 生成一個柱形圖插件爲例,爲大家介紹一下如何從頭到尾實現一個BI 插件:

1.Echarts對象初始化及調試

首先我們使用的echarts。所以要引入,wyn內置已經將一個echarts做了內嵌,可以有效的減少重複引入和速度。使用方法如下:

我們在visual.json中配置引用echarts:"dependencies": ["echarts"]

使用host.moduleManager.getModule('echarts').init(dom);對echart進行初始化。這時就獲取了一個echarts對象。然後就開啓調試:

wyn-visual-tools.cmd develop

運行後即可在wyn的可視化插件中使用開發工具調試。添加調試工具並刷新:

2.獲取數據

在組件加載時,除了初始化外,每次就是首先進入的就是update方法。而updata有一個入參:options。而我們所需要所有在頁面上交互的東西,都會在這個屬性裏面被傳進來。

Options: {
      dataViews: data,
      properties: properties
}

dataViews就是我們所有傳遞的數據,而properties就是所有右側裏面的屬性。那麼我們這次的示例需要一個分類,一個數值。所以我們就需要先將這兩個定義出來。而這個定義就在capabilities.json中。方法如下:

 "dataBinding": {
        "dataRoles": [
            {
                "name": "ActualValue",
                "displayNameKey": "數值",
                "kind": "value",
                "options": [
                    {
                        "displayNameKey": "數據格式",
                        "type": "format",
                        "name": "valueFormat"
                    }
                ]
            },
            {
                "name": "dimension",
                "displayNameKey": "分類",
                "kind": "grouping"
            }
        ]
    },

我們用grouping定義分類字段,value定義數值字段。所有數據按照分類字段分組,並透視聚合數值字段。這時候,我們隨便綁定兩個字段,在update中console一下options。看一下輸出結果:

可以看到,綁定的數據已經獲取到了。

3.圖表繪製

有了數據我們下一步就是利用數據將圖表繪製出來。

Echart的原始option如上,所以我們只需要將數據作用到series[0]中,然後分類作爲xAxis的數據即可。

在如上代碼中,我們在update中獲取到數據並記錄到data對象中,並建立一個bindingName對象,用來存儲綁定的字段的名稱。用來獲取對象數組的數據。然後我們新定義一個方法render()專門用來繪製圖表。該方法中,我們去解析data對象。用map去返回一個數組,第一個數組取對象中所有的分類。第二個取對象中所有的數據。然後使用chart對象繪製圖表,此時一個簡單的echats折線圖就繪製出來了:

可以看到,數據也是我們綁定的數據。

4.添加屬性

那麼在已經做好圖表的基礎上,我們可以在添加一點對屬性的控制。也就是利用wyn右側的屬性面板,去調整圖表的樣式風格。我們以折線的顏色爲例子。

首先需要在右側添加一個調色板來供用戶選擇顏色,前面提到過,屬性的添加也在capabilities中實現:

可以看到我們添加了一個Color類型的屬性,那麼儀表板的屬性面板就多了一個命名爲線條顏色的屬性。這個屬性同樣可以在原先提到的update(options) 的options中獲取。

可以看到,我們同樣用一個properties對象接收所有屬性。並直接用capabilities中定義的name去獲取。並賦值給Echarts的lineStyle:color屬性。此時,我們再次刷新圖表並隨便選擇一個顏色:

可以看到,一個可以控制顏色的折線圖已經實現。

最後我們在對代碼做一些簡單的完善。

添加頁面大小改變時的重繪以及組件銷燬事件。至此一個簡單的echarts插件就開發完成了。

總結

以上就是實現一款BI插件的全過程,如果您想了解更多信息,歡迎點擊這裏查看。

擴展鏈接:

創意展示:打造數據大屏的炫酷天氣預報插件

聊一聊數字孿生與3D可視化

探祕移動端BI:發展歷程與應用前景解析

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章