天天看點

表格渲染千變萬化,這篇文章帶你了解通透

作者:永洪科技

今天要講解的功能是Yonghong Desktop中的表格渲染功能,該功能可以通過柱狀圖、圖表數量等多種形式來更加形象的描述資料的大小。

表格渲染千變萬化,這篇文章帶你了解通透

表格渲染

注意:隻能對數值類型的資料進行表格渲染,此屬性隻适用于表、交叉表和自由式表格。

表格渲染分為三種:動态渲染、使用者自定義的渲染、産品預定義的渲染。其中預定義渲染包括柱狀渲染、正負柱狀渲染、形狀渲染、正負形狀渲染、圖檔渲染、斜線渲染、紅綠燈渲染、漲跌渲染。

表格渲染在表(簡單表)中的作用區域為列(不包括清單頭),在交叉表中表格渲染的作用區域為行表頭、清單頭以及資料區,自由式表格設定在單元格上,可以是表格形式,也可以是交叉表形式。

表格渲染千變萬化,這篇文章帶你了解通透

簡單表形式&交叉表形式表格渲染

01使用方法

了解了表格渲染的使用場景以及基本類型,那麼具體該如何使用呢?請聽我一一道來,首先是設定表格渲染以及退出表格渲染的步驟。

1、設定表格渲染

選中表、交叉表或自由式表格上表格渲染的作用區域,點選右側面闆的格式-表格渲染。

表格渲染千變萬化,這篇文章帶你了解通透

2、退出表格渲染

在右側面闆格式中選擇表格渲染,在表格渲染對話框中選擇無渲染,則表格中相應的區域退出表格渲染模式。如下圖:

表格渲染千變萬化,這篇文章帶你了解通透

02渲染類型介紹

那麼柱狀渲染、正負柱狀渲染這些叽裡呱啦的渲染該怎麼用呢?你往下看~

假設一資料源中的資料如下表:

表格渲染千變萬化,這篇文章帶你了解通透

柱狀渲染

在表格渲染對話框中選擇柱狀渲染,可設定最大值(勾選自動時最大值為設定渲染列中所有資料的最大值,不勾選時需手動輸入最大值)、顯示值和分離标簽,腳本處于灰色狀态,不支援腳本的輸入。

在柱狀渲染、正負柱狀渲染、形狀渲染和正負形狀渲染中都支援顯示值的功能,顯示值的功能在屬性中可以通過render.value.calc.rows進行配置,如果沒有配置的話就會計算字元的長度,最多計算1000,最大占到格子的一半。

表格渲染千變萬化,這篇文章帶你了解通透

當對該資料源進行上述操作後,效果如下圖所示:

表格渲染千變萬化,這篇文章帶你了解通透

正負柱狀渲染

在表格渲染對話框中選擇正負柱狀渲染,可設定屬性包括最大值(勾選自動時最大值為設定渲染列中所有資料的最大值,不勾選時需手動輸入最大值)、顯示值、分離标簽、負數顔色、柱子顔色、目标值、目标線樣式、目标線顔色。腳本處于灰色狀态,不支援腳本的輸入,并且正負柱狀渲染支援添加目标線的。

最大值是表中資料取絕對值後的最大值,例如最大值為100,則表中的正數資料大于100 時,此資料當做100 來處理,表中的負數資料小于-100 時,此資料當做-100來處理;目标值是目标線在軸上所處位置的值;目标線樣式和目标線顔色分别是對目标線的樣式和顔色的設定;負數顔色則是表中的值為負數時畫出的柱子的顔色。

表格渲染千變萬化,這篇文章帶你了解通透

當對該資料源進行上述操作後,效果如下圖所示:通過淺灰色柱形條的長度來描述正數資料的大小,紅色柱形條的長度來描述負數資料的大小,黃色的細線是設定的目标值,效果如下:

表格渲染千變萬化,這篇文章帶你了解通透

形狀渲染

形狀渲染隻支援正數,根據數值來決定形狀的個數。倘若資料有小數,則五角星按比例進行顯示,如2.5,則顯示兩個半五角星。

現隻支援五角星作為形狀。使用者可通過在局部格式中設定背景色來改變五角星的顔色,通過計算機關來控制五角星的個數。倘若目前資料為2000,計算機關為200,則顯示的五角星個數為目前資料除以計算機關所得的資料,應當顯示10個五角星。

表格渲染千變萬化,這篇文章帶你了解通透
表格渲染千變萬化,這篇文章帶你了解通透

正負形狀渲染

正負形狀渲染支援正數以及負數,根據數值來決定形狀的個數。倘若資料有小數,則五角星按比例進行顯示,如2.5,則顯示兩個半五角星。現隻支援五角星作為形狀。通過在局部格式中設定背景色來改變五角星的顔色,設定負數顔色來設定負數五角星的顔色,以及計算機關。倘若目前資料為2000,計算機關為200,則顯示的五角星個數為目前資料除以計算機關所得的資料,應當顯示10 個五角星。

表格渲染千變萬化,這篇文章帶你了解通透
表格渲染千變萬化,這篇文章帶你了解通透

圖檔渲染

倘若在查詢中資料為圖檔的位址,在儀表盤中綁定該資料後,選擇圖檔渲染,則目前表格中會顯示出該圖檔。查詢中的資料為各個圖檔的位址,如下圖所示:

表格渲染千變萬化,這篇文章帶你了解通透

分别在American 列和column列使用圖檔渲染,如下圖。其中當使用者勾選縮放選項時,圖表按照格子的比例進行顯示,當不勾選縮放時,圖檔按照原始比例進行顯示。

表格渲染千變萬化,這篇文章帶你了解通透

進行圖檔渲染後如下圖所示:

表格渲染千變萬化,這篇文章帶你了解通透

斜線渲染

該渲染方式在交叉表的表頭中更有意義,使用者選中交叉表的第一列第一行的交界區域,右鍵選擇表格渲染,標明渲染格式為斜線渲染,如下圖所示:

表格渲染千變萬化,這篇文章帶你了解通透

【表頭内容(,分割)】表頭的内容通過英文格式的”,” 來進行分割。

【始于左上點】當勾選時斜線的起始點為表格的左上點,不勾選時為右下點。

注意當内容含有中文時,使用者需要設定表格中的字型類型,一般設為宋體。

點選确定按鈕後,效果如下。

表格渲染千變萬化,這篇文章帶你了解通透

紅綠燈渲染

在表格渲染對話框中選擇紅綠燈渲染,支援顯示值、起點值和終點值,大于終點值時顯示紅燈的勾選,并且支援紅燈,黃燈,綠燈圖檔的自定義設定。腳本處于灰色狀态,不支援腳本的輸入。

勾選顯示值表示設定渲染後會同時顯示資料的數值,反之則隻顯示渲染,不顯示數值;起點值和終點值将資料分為三段,一是小于起點值的資料,二是大于等于起點值小于等于終點值的資料,三是大于終點值的資料。

表格渲染千變萬化,這篇文章帶你了解通透

例如,ID 為 1到 15 的資料起點值為5,終點值為10,勾選顯示值和大于終點值時顯示紅燈的選項,配置如下圖所示:

表格渲染千變萬化,這篇文章帶你了解通透
表格渲染千變萬化,這篇文章帶你了解通透

使用者還可以根據需要設定紅綠燈渲染的圖檔。操作如下:

在表格渲染對話框的紅綠燈渲染下選擇紅燈,黃燈或綠燈的圖檔,點選彈出圖樣編輯器,如下圖所示:

表格渲染千變萬化,這篇文章帶你了解通透

在圖檔清單上,使用者可根據需要選擇圖檔。也可點選導入圖檔,将圖檔導入後,設定為紅綠燈渲染的圖檔。

漲跌渲染

在表格渲染對話框中選擇漲跌渲染,支援顯示值、比較值的輸入,并且支援上漲,下跌圖檔的自定義設定。腳本處于灰色狀态,不支援腳本的輸入。

勾選顯示值表示設定渲染後資料的數值還會同時顯示,若不勾選則隻顯示渲染,不顯示數值;比較值表示上漲與下跌的參考标準。小于比較值的資料顯示為下跌,大于等于比較值的資料顯示為上漲。

例如,ID 為 1到 15的資料,設定比較值為5,勾選顯示值選項,則配置如下圖所示:

表格渲染千變萬化,這篇文章帶你了解通透

當對該資料源進行上述操作後,效果如下圖所示:即:小于5的值顯示為下跌,大于等于5的值顯示為上漲。

表格渲染千變萬化,這篇文章帶你了解通透

漲跌渲染的箭頭顔色會根據語言環境改變,國内常用的是紅色箭頭上漲,綠色箭頭下跌,切換為其他語言環境時,改為綠色箭頭上漲,紅色箭頭下跌。

表格渲染千變萬化,這篇文章帶你了解通透

使用者也可以根據需要設定漲跌渲染的圖檔。操作同紅綠燈渲染。

動态渲染&自定義渲染

有的朋友可能會問,除了咱們永洪内置的這些渲染之外,我們自己可以寫腳本自定義渲染類型嗎?答案是可以!您接着看!

動态渲染

動态渲染是指使用者通過編寫腳本來達到表格渲染的目的。當使用者選擇動态渲染後,表格對話框中的腳本處于激活狀态,使用者可在此進行腳本的編寫。

表格渲染千變萬化,這篇文章帶你了解通透

使用者可通過腳本傳回圖檔,傳回的圖檔有兩種途徑,一種是使用者建構圖表,一種是通過URL來引用已經存在的圖檔。

表格渲染千變萬化,這篇文章帶你了解通透

在通過URL來引用圖檔時,使用者可以引用本地的圖檔,也可以引用網絡上的圖檔。如下圖所示,引用本地圖檔,注意需要在路徑前邊添加file:///。

表格渲染千變萬化,這篇文章帶你了解通透

如下圖所示引用網絡上的圖檔。

自定義渲染

使用者在bihome中建立renders.xml檔案,則在表格渲染對話框中的自定義檔案夾下顯示使用者自定義的表格渲染。

表格渲染千變萬化,這篇文章帶你了解通透

自定義渲染renders.xml的格式為:

表格渲染千變萬化,這篇文章帶你了解通透

render檔案隻是一個配置檔案,開放了設定項的接口,使用者需要自己編寫對應java檔案,調用産品的自定義接口,編譯為class檔案,放在指定位置,具體方法可以聯系定制開發;最後還需要把前面class檔案的路徑添加到“tomcat\bin\setclass.bat”裡面,放在“set CLASSPATH=%CLASSPATH%;”後面,重新開機産品後即可生效。

表格渲染支援參數

咱們的表格渲染功能強大,還可以支援與自定義參數和參數元件的關聯~

在表格渲染dialog中,設定具體值的地方支援使用參數或參數元件,如下圖所示:柱狀渲染的最大值、目标值可以通過下拉框來選擇參數或參數元件:

表格渲染千變萬化,這篇文章帶你了解通透

表格渲染使用了參數或參數元件後,參數的值改變、參數元件的值切換後都會以最新參數值來重新整理渲染效果。

注意:表格渲染dialog中使用的參數的資料類型必須為【數值型】。

繼續閱讀