FVS日期時間元件

適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FineVis 的相關功能。

1.1 版本

1.2 功能簡介

日期時間元件在範本預覽時，可選擇日期時間，支援透過參數聯動其他組件。效果如下圖所示：

組件動畫請參見：FVS組件動畫 。

組件樣式請參見：FVS組件樣式屬性 。元件名稱在「內容」中設定。

2.1 元件內容

2.1.1 內容

日期時間元件可設定的內容如下圖所示：

各設定項的詳細介紹如下表所示：

2.1.2 內容樣式

1）日期時間的格式不同，內容樣式有所不同。

注：V2.2.1 之前版本，僅支援設定元件文字字元樣式。

注1：樣式設定對下拉麪板中的字體無效，下拉麪板字元樣式僅受 FVS範本樣式 影響。

注2：修改字元顏色後，再設定 FVS範本樣式 ，字元顏色會跟隨主題變化，需重新設定。

2）當格式為「年-月-日」時，行動端 還支援選擇樣式範本。其他三種格式，行動端設定項和 PC端一致。

注：「普通日曆」和「週檢視表日曆」建議開啟 行動端佈局 使用，未開啟行動端佈局時，日曆展開的可見範圍由組件大小決定。

2.2 元件交互事件

點選「交互>新增事件」，可新增 JavaScript 事件實現更多效果。日期時間元件支援「初始化後事件」和「編輯結束事件」。如下圖所示：

點選具體的某一個事件，會彈出 JavaScript 事件設定框。如下圖所示：

注：關於 FVS 支援的 JavaScript 可參考文檔 FVS支援的JSAPI場景 。

3.1 準備範本

1）點選設計器左上角「檔案>建立視覺化看板」。

2）建立資料庫查詢 ds1 ，輸入如下 SQL 查詢語句： 

SELECT * FROM 訂單 where 1=1 

${if(len(starttime)=0,""," and 訂購日期>='"+starttime+"'")}

${if(len(endtime)=0,""," and 訂購日期<='"+endtime+"'")}

表示獲取訂單資料表中，訂購日期在 starttime（起始時間）和 endtime（結束時間）範圍內的資料。

如下圖所示：

3.2 新增標題組件

點選組件區「文字>標題組件」，新增到頁面中。在右側配置面板中設定標題內容為「起始時間」，再複製一個標題設定內容為「結束時間」。如下圖所示：

3.3 新增日期時間元件

點選組件區「元件>日期時間」，新增到頁面中。

在右側配置區，設定綁定參數為 starttime ，與資料集參數 starttime 相匹配。預設值自訂日期時間選擇 2011-05-22 。

再複製一個日期時間元件，綁定參數為 endtime ，與資料集參數 endtime 相匹配。預設值自訂日期時間選擇 2011-06-22 。

步驟如下圖所示：

3.4 新增折線圖組件

1）點選組件區「圖表>折線圖」，新增到頁面中，給折線圖綁定資料如下圖所示：

2）選中折線圖，點選「內容>樣式>坐標軸」，將 X軸 的類型設定為「時間坐標軸」。

3.5 效果預覽

3.5.1 PC 端

點選右上角「儲存」，點選「預覽」，修改起始時間或結束時間後，折線圖則顯示對應時間範圍內的資料。效果如 1.2 節所示。

3.5.2 行動端

預覽方式請參考 FVS行動端預覽 ，效果如下圖所示：

點選下載範本：日期時間元件.fvs