反饋已提交
網絡繁忙
適用場景:安裝了「FVS大屏編輯模式」插件的使用者,可參考本文了解 FVS 範本的相關功能。
注:不支援行動端。
新增日期時間元件
日期時間元件在範本預覽時,可選擇日期時間,支援透過參數聯動其他組件。效果如下圖所示:
組件動畫請參見:FVS組件動畫 。
組件樣式請參見:FVS組件樣式屬性 。元件名稱在「內容」中設定。
日期時間元件可設定的內容如下圖所示:
各設定項的詳細介紹如下表所示:
日期時間格式支援選擇 4 種型別,每種型別也分別支援選擇多種顯示樣式,同時支援手動輸入
可設定日期時間的預設值,有如下 3 種
1)自訂日期時間:預設取當天日期時間,顯示值與上方格式型別保持一致
可刪除後重新選擇,同時支援手動輸入
2)欄位:可選擇資料集中欄位,若傳回值為陣列,只取陣列序列中第一個值顯示
3)公式:點選右側 fx 輸入公式,若傳回值為陣列,只取陣列序列中第一個值顯示
可設定開始日期和結束日期。開始日期必須小於結束日期
設定日期範圍後,不在範圍內的資料將變成灰色不可選取狀態
設定項包括以下 3 種:
1)無限制:不做限制
2)自訂:預設取當天日期時間,顯示值與上方格式型別保持一致。可刪除後重新選擇
點選「交互>新增事件」,可新增 JavaScript 事件實現更多效果。日期時間元件支援「初始化後事件」和「編輯結束事件」。如下圖所示:
點選具體的某一個事件,會彈出 JavaScript 事件設定框。如下圖所示:
注:關於 FVS 支援的 JavaScript 可參考文檔 FVS大屏支援的JSAPI場景 。
1)點選設計器左上角「檔案>建立大屏報表」。
2)建立資料庫查詢 ds1 ,輸入如下 SQL 查詢語句:
SELECT * FROM 訂單 where 1=1
${if(len(starttime)=0,""," and 訂購日期>='" starttime "'")}
${if(len(endtime)=0,""," and 訂購日期<='" endtime "'")}
表示獲取訂單資料表中,訂購日期在 starttime(起始時間)和 endtime(結束時間)範圍內的資料。
如下圖所示:
點選組件區「文字>標題組件」,新增到頁面中。在右側配置面板中設定標題內容為「起始時間」,再複製一個標題設定內容為「結束時間」。如下圖所示:
點選組件區「元件>日期時間」,新增到頁面中。
在右側配置區,設定元件名稱為 starttime ,與資料集參數 starttime 相匹配。預設值自訂日期時間選擇 2011-05-22 。
再複製一個日期時間元件,元件名稱為 endtime ,與資料集參數 endtime 相匹配。預設值自訂日期時間選擇 2011-06-22 。
步驟如下圖所示:
1)點選組件區「圖表>折線圖」,新增到頁面中,給折線圖綁定資料如下圖所示:
2)選中折線圖,點選「內容>樣式>坐標軸」,將 X軸 的型別設定為「時間坐標軸」。
點選右上角「儲存」,點選「預覽」,修改起始時間或結束時間後,折線圖則顯示對應時間範圍內的資料。效果如 1.2 節所示。
點選下載範本:日期時間元件.fvs
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉
反馈已提交
网络繁忙