DataV：時間選取器

圖表樣式

時間選取器是控制群組件的一種，支援自訂日曆的背景顏色、日曆的日期時間樣式以及時間格式類型等，可以根據時間查詢並動態展示其他組件的資料。

配置面板

• 搜尋配置：單擊配置面板右上方的搜尋配置，可在搜尋配置面板中輸入您需要搜尋的配置項名稱，快速定位到該配置項，系統支援模糊比對。詳情請參見搜尋資產配置。

• 圖表尺寸：包括組件的寬度和高度，單位為px。可單擊表徵圖鎖定組件的寬高比，等比例修改組件的寬高。再次單擊進行解鎖，解鎖後寬高比不受限制。
• 圖表位置：包括組件的橫座標和縱座標，單位為px。橫座標為組件左上方距離頁面左邊界的像素距離，縱座標為組件左上方距離頁面上邊界的像素距離。
• 旋轉角度：以組件的中心為中心點，進行旋轉，單位為度（°）。
  • 手動輸入角度值，控制組件的旋轉角度。
  • 拖動表徵圖內的黑點，控制組件的旋轉角度。
  • 單擊表徵圖，控制組件左右翻轉樣式。
  • 單擊表徵圖，控制組件上下翻轉樣式。
• 不透明度：取值範圍為0~1。為0時，圖表隱藏；為1時，圖表全部顯示。預設為1。

• 格式設定：設定時間格式的樣式，可選，請參見%Y-%m-%d %H:%M:%S的樣式自訂配置時間格式類型。

• 可選時間範圍：設定選取器中可選時間的範圍，設定開始時間和結束時間兩個配置項內容，可單擊表徵圖開啟或關閉可選時間範圍配置項。

• 時刻設定：單擊表徵圖開啟或關閉可選時刻設定配置項，開啟後，可設定時分秒內容。

• 全域樣式

  • 字型：文本的字型系列，預設為微軟雅黑。

    說明

    請選擇您系統中已經安裝的字型，如果您系統中沒有選擇的字型，組件文本會顯示為預設的字型樣式。

  • 輸入框樣式

    • 縮排：輸入框內文字的縮排。

    • 背景色：輸入框的背景顏色。

    • 普通邊框樣式

      參數	說明
      邊框寬度	邊框的寬度，單位為px。
      邊框顏色	邊框的顏色。
      邊框圓角	邊框的圓角大小，取值範圍為0~360。數值為0的時候輸入框為方形，數值為360時輸入框為圓形。

    • 懸浮邊框樣式

      參數	說明
      邊框寬度	滑鼠懸浮在輸入框時邊框的寬度，單位為px。
      邊框顏色	滑鼠懸浮在輸入框時邊框的顏色。
      邊框圓角	滑鼠懸浮在輸入框時邊框的圓角大小，取值範圍為0~360。數值為0的時候輸入框為方形，數值為360時輸入框為圓形。

    • 文本樣式

      參數	說明
      字型大小	文本字型大小的大小。
      字型顏色	輸入框文本的顏色。
      字型粗細	文本的字型粗細，預設為normal。

• 日曆樣式 ：在預覽或配置頁面，單擊時間選取器輸入框時，顯示的日曆框的樣式。該樣式配置項在PC端生效。

  • 日曆框高度：日曆框的高度。

  • 頂部間距：日曆頂部距離輸入框的距離。

  • 圓角：日曆框的圓角大小，取值範圍為0~360。數值為0的時候日曆框為方形，數值為360時日曆框為圓形。

  • 日曆框背景色：日曆框的背景色。

  • 頂部樣式

    • 日期文本樣式

      參數	說明
      字型大小	日期文本字型大小的大小。
      字型顏色	日期文本的顏色。
      字型粗細	日期文本的字型粗細，預設為normal。

    • 時間文本樣式

      參數	說明
      字型大小	時間文本字型大小的大小。
      字型顏色	時間文本的顏色。
      字型粗細	時間文本的字型粗細，預設為normal。

    • 頂部高度：日曆頂部高度的值，取值範圍為10~20。頂部高度值是基於日曆框高度的百分比數值。

    • 上下月表徵圖間距：日曆中上下月表徵圖之間的距離，取值範圍為0~50。

    • 年月選擇框間距：日曆中年月選擇框的間距值，取值範圍為0~50。

    • 分割線樣式

      參數	說明
      顏色	頂部分割線的顏色。
      線寬	頂部分割線寬度的大小。

  • 主體樣式

    • 分割線樣式

      參數	說明
      顏色	主體分割線的顏色。
      線寬	主體分割線寬度的大小。

    • 高度：主體部分整體的高度。

  • 日期樣式

    • 日期表格樣式：日期表格首行的樣式。

      參數	說明
      背景色	日期表格的背景顏色。
      邊框樣式	日期表格邊框的寬度、顏色和圓角大小，取值範圍為0~360。數值為0的時候邊框為方形，數值為360時邊框為圓形。
      字型大小	日期表格字型大小的大小。

    • 日期表格行列樣式：日期表格具體選擇行列的樣式。

      • 普通樣式

        參數	說明
        背景色	日期表格行列的背景顏色。
        邊框樣式	日期表格行列中邊框的寬度、顏色和圓角大小，取值範圍為0~360。數值為0的時候邊框為方形，數值為360時邊框為圓形。
        字型粗細	日期表格行列的字型粗細樣式，預設為normal。
        字型顏色	日期表格行列的字型顏色。

      • 懸停樣式：滑鼠移至上方在日期表格行列上的樣式。

        參數	說明
        背景色	滑鼠移至上方在日期表格行列上時的背景顏色。
        邊框樣式	滑鼠移至上方在日期表格行列上時邊框的寬度、顏色和圓角大小，取值範圍為0~360。數值為0的時候邊框為方形，數值為360時邊框為圓形。
        字型粗細	滑鼠移至上方在日期表格行列上時字型粗細，預設為normal。
        字型顏色	滑鼠移至上方在日期表格行列上時的字型顏色。

      • 選中樣式：滑鼠選中某個日期表格行列時的樣式。

        參數	說明
        背景色	滑鼠選中時日期表格行列的背景顏色。
        邊框樣式	滑鼠選中時日期表格行列的邊框的寬度、顏色和圓角大小，取值範圍為0~360。數值為0的時候邊框為方形，數值為360時邊框為圓形。
        字型粗細	滑鼠選中時日期表格行列字型粗細樣式，預設為normal。
        字型顏色	滑鼠選中時日期表格行列的字型顏色。

      • 今日樣式：日期表格行列中當天的樣式。

        參數	說明
        背景色	當日日期在表格行列的背景顏色。
        邊框樣式	當日在日期表格行列的邊框的寬度、顏色和圓角大小，取值範圍為0~360。數值為0的時候邊框為方形，數值為360時邊框為圓形。
        字型粗細	當日在日期表格行列字型粗細樣式，預設為normal。
        字型顏色	當日在日期表格行列的字型顏色。

      • 上下月樣式：日期表格行列中除了當月之外上下月部分的顯示樣式。

        參數	說明
        背景色	上下月日期表格行列的背景顏色。
        邊框樣式	上下月日期表格行列的邊框的寬度、顏色和圓角大小，取值範圍為0~360。數值為0的時候邊框為方形，數值為360時邊框為圓形。
        字型粗細	上下月日期表格行列字型粗細樣式，預設為normal。
        字型顏色	上下月日期表格行列的字型顏色。

      • 星期字型樣式：日期表格首行星期字型的樣式。

        參數	說明
        字型顏色	日期表格首行星期字型顏色。
        字型粗細	日期表格首行星期字型粗細樣式，預設為normal。

  • 時間樣式

    • 時間容器樣式

      參數	說明
      邊框樣式	時間容器的邊框寬度和顏色。
      字型大小	時間容器的字型大小。

    • 時間行樣式

      • 普通樣式

        參數	說明
        背景色	時間行的背景顏色。
        字型粗細	時間行字型粗細樣式，預設為normal。
        字型顏色	時間行字型顏色。

      • 懸停樣式：滑鼠移至上方在時間行時候的樣式。

        參數	說明
        背景色	懸停時候時間行的背景顏色。
        字型粗細	懸停時候時間行字型粗細樣式，預設為normal。
        字型顏色	懸停時候時間行字型顏色。

      • 選中樣式：選中特定時間行時候的樣式。

        參數	說明
        背景色	選中某一時間行時的背景顏色。
        字型粗細	選中某一時間行時字型粗細樣式，預設為normal。
        字型顏色	選中某一時間行時字型顏色。

  • 底部樣式

    • 高度：最底部樣式中高度的大小數值。

    • 底部位移值：底部內容距離最底端的位移距離值的大小。

    • 此刻按鍵樣式

      參數	說明
      字型大小	此刻按鍵字型大小的大小。
      字型顏色	此刻按鍵的字型顏色。
      字型粗細	此刻按鍵字型粗細樣式，預設為normal。
      左側位移值	此刻按鍵距離最左側位移的數值大小。
      頂部位移值	此刻按鍵距離底部最頂端位移的數值大小。

    • 切換按鍵樣式：切換按鍵包括選擇時間和選擇時刻兩種切換模式。

      參數	說明
      字型大小	切換按鍵字型大小的大小。
      字型顏色	切換按鍵的字型顏色。
      字型粗細	切換按鍵字型粗細樣式，預設為normal。
      右側位移值	切換按鍵距離最右側位移的數值大小。
      頂部位移值	切換按鍵距離底部最頂端位移的數值大小。

    • 確定按鍵樣式

      參數	說明
      字型大小	確定按鍵字型大小的大小。
      字型顏色	確定按鍵的字型顏色。
      字型粗細	確定按鍵字型粗細樣式，預設為normal。
      右側位移值	確定按鍵距離最右側位移的數值大小。
      頂部位移值	確定按鍵距離底部最頂端位移的數值大小。
      背景顏色	確定按鍵的背景顏色。
      圓角	確定按鍵的圓角大小，取值範圍為0~360。數值為0的時候按鍵邊框為方形，數值為360時按鍵邊框為圓形。

  • 年份跨度：設定日曆年度份前後年度跨數，取值範圍為1~50年。

資料面板

配置欄位說明

互動面板

選中目前時間變化時右側的啟用，開啟組件互動功能。時間選取器組件擁有互動配置，可改變選取器中的時間資料內容，觸發資料請求，拋出回調值，然後在其他組件中配置使用。預設拋出資料面板中配置的time、startTime和endTime值，具體配置請參見組件回調ID配置。

藍圖編輯器互動配置

1. 在畫布編輯器頁面，按右鍵組件，選擇匯出到藍圖編輯器。
2. 單擊頁面左上方的表徵圖。

3. 在藍圖編輯器配置頁面，單擊匯入節點欄內的時間選取器組件，在畫布中可以看到如下圖所示的時間選取器的藍圖編輯器配置參數。

   • 事件

     事件	說明
     當資料介面請求完成時	資料介面請求返回並經過過濾器處理後拋出的事件，同時拋出處理後的JSON格式的資料。具體資料樣本請參見畫布編輯器中組件右側配置面板資料頁簽的資料響應結果地區。
     當資料介面請求失敗時	資料介面請求失敗時（請求失敗的情況可能是：網路問題或介面報錯等）返回並經過過濾器處理後拋出的事件，同時拋出處理後的JSON格式的資料。具體資料樣本請參見畫布編輯器中組件右側配置面板資料頁簽的資料響應結果地區。
     目前時間變化時	目前時間發生變化時拋出的事件，同時拋出該時間下對應的資料項目。

   • 動作

     動作	說明
     請求資料介面	重新請求服務端資料，上遊資料處理節點或圖層節點拋出的資料將作為參數。例如時間選取器配置了API資料來源為https://api.test，傳到請求資料介面動作的資料為{ id: '1'}，則最終請求介面為https://api.test?id=1。
     匯入資料介面	按組件繪製格式處理資料後，匯入組件，重新繪製。不需要重新請求服務端資料。具體資料樣本請參見畫布編輯器中組件右側配置面板資料頁簽的資料響應結果地區。
     擷取目前時間器值	擷取目前時間選取器的值。
     清空組件到預設值	表示還原到預設值。
     更新群組件配置	動態更新組件的樣式配置。需要先在組件的配置面板中，單擊複製配置到剪貼簿，擷取組件配置資料。再根據需要在藍圖編輯器配置頁面的資料處理節點中更改對應樣式的欄位值。
     顯示	顯示組件，參見資料樣本如下。 return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
     隱藏	隱藏組件，參見資料樣本如下。 return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
     切換顯隱狀態	切換組件顯示或者隱藏，參見資料樣本如下。 return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } };
     移動	將組件移動到指定位置，參見資料樣本如下。 return { // 移動方式。絕對位置：to，相對定位：by。預設值：to。 "positionType": "to", // 指定位置。x座標，y座標。 "attr": { "x": 0, "y": 0 }, // 動畫方式。 "animation": { "enable": false, // 動畫延時。 "animationDuration": 1000, // 動畫曲線。可選值為：linear|easeInOutQuad|easeInOutExpo。 "animationEasing": "linear" } };