全部產品
Search
文件中心

DataV:單選框

更新時間:Nov 19, 2024

本文介紹單選框全量選擇時各配置項的含義。

圖表樣式

單選框是控制群組件的一種,可以作為單選表單在可視化應用中使用,將使用者選擇的資料提交到後端進行處理。或者通過互動配置,在其他組件上顯示使用者選擇的內容。image.png

樣式面板image.png

  • 搜尋配置:單擊樣式面板右上方的搜尋配置項表徵圖image,可在搜尋配置面板中輸入您需要搜尋的配置項名稱,快速定位到該配置項,系統支援模糊比對。詳情請參見搜尋配置項

    • 尺寸:包括組件的寬度和高度,單位為px。

    • 定位:包括組件的橫座標縱座標,單位為px。橫座標為組件左上方距離頁面左邊界的像素距離,縱座標為組件左上方距離頁面上邊界的像素距離。

    • 旋轉:以組件的中心為中心點,進行旋轉,單位為度(°)。

      • 手動輸入角度值,控制組件的旋轉角度。

      • 單擊image表徵圖,控制組件左右翻轉樣式。

      • 單擊image表徵圖,控制組件上下翻轉樣式。

    • 不透明度:取值範圍為0~1。為0時,圖表隱藏;為1時,圖表全部顯示。預設為1

  • 全域樣式

    參數

    說明

    預設選中

    預設選中的選項。

    說明

    預設選中的內容必須在資料來源配置中的value值內選擇。

    相片順序

    單選框的相片順序,可選:垂直方向水平方向

    按鈕半徑

    單選框按鈕的半徑大小值。

    間距

    選項的間距樣式,可配置選項間間距選項內間距

    • 選項間間距:選項之間的距離。

    • 選項內間距:單選框按鈕與文本之間的距離。

  • 普通樣式

    • 文本樣式

      參數

      說明

      字型

      文本的字型樣式,預設為微軟雅黑

      文字粗細

      文本的字型粗細。

      字型大小

      文本字型大小的大小。

      顏色

      單選框中文本的顏色,請參見顏色選取器說明進行修改。

    • 按鈕樣式

      參數

      說明

      背景色

      單選框按鈕的背景顏色。

      邊框

      按鈕的邊框樣式,包括邊框的寬度、邊框顏色、邊框圓角大小值和線條類型樣式。

  • 選中樣式:單選框被選中時的樣式。

    • 文本樣式

      參數

      說明

      字型

      單選框被選中時的文本字型樣式,預設為微軟雅黑

      文字粗細

      單選框被選中時的文本字型粗細。

      字型大小

      單選框被選中時的文本字型大小的大小。

      顏色

      單選框被選中時的文本的顏色,請參見顏色選取器說明進行修改。

    • 按鈕外圈樣式

      參數

      說明

      背景色

      單選框被選中時,按鈕外圈的背景顏色。

      陰影色

      單選框被選中時,按鈕外圈的陰影顏色。

      邊框樣式

      單選框被選中時,按鈕外圈的邊框樣式,包括邊框的寬度、邊框顏色、邊框圓角大小值和線條類型樣式。

    • 按鈕內部樣式

      參數

      說明

      背景色

      單選框被選中時,按鈕內部的背景顏色。

      邊框圓角

      單選框被選中時,按鈕內部的邊框圓角大小值,取值範圍為0~360。數值為0的時候按鈕內部邊框為方形,數值為360時為圓形。

資料來源面板image.png

參數

說明

value

單選框中各按鈕顯示的內容。

disabled

單選框中各按鈕是否設定為禁選。

說明

一旦某個按鈕的disabled欄位被配置為true後,在預覽或發佈頁面內無法單擊選中該單選項。

資料項目配置

說明

資料來源

組件的資料來源中通過代碼編輯可視化編輯展示了組件所包含的資料欄位。也可以修改資料類型,靈活配置組件資料。

資料對應

當您需要自訂圖表欄位配置時,可以在資料對應模組設定不同的欄位對應內容,將這些欄位對應到組件對應的欄位上。無需修改資料來源中的欄位,就可以實現資料的即時匹配。也可以單擊image表徵圖對欄位分別樣式配置。

過濾器

開啟過濾器,選擇已建立的資料過濾器或建立資料過濾器,並配置資料過濾器指令碼,實現資料的篩選功能。詳情請參見管理資料過濾器

資料響應結果

即時展示了組件所使用的資料。當組件資料來源發生變化時,資料響應結果會對應展示最新的資料。如果系統反應延遲,您可以單擊右側的image表徵圖,查看資料響應結果,也可以單擊右側的image表徵圖,擷取組件的最新資料。您也可以單擊查看樣本,查看當前組件的響應結果樣本。

禁止載入態

勾選複選框,在組件更新和預覽資料看板時,將看不到組件初始化時的載入內容,去勾選則相反。預設為去勾選狀態。

受控模式

勾選複選框,組件初始化狀態下不請求資料,僅通過全域變數或藍圖編輯器配置的方法發起請求資料;去勾選複選框,可以使用自動更新請求資料。預設為去勾選狀態。

自動更新請求

勾選複選框,可以手動輸入輪詢的時間頻次設定動態輪詢。清除後則不會自動更新,需要手動重新整理頁面,或通過藍圖編輯器和全域變數事件來觸發請求更新資料。

進階面板image.png

開啟開關,開啟關聯全域變數功能。可在單擊單選框的選項時,觸發資料請求,拋出臨時變數,在其他組件中配置使用。預設拋出資料來源面板中配置的valuedisabled值,具體配置請參見組件互動配置

藍圖互動

  1. 單擊頁面左上方的image表徵圖,進入藍圖頁面。

  2. 圖層節點頁簽下,添加當前組件至主畫布中。

  3. 查看藍圖配置參數。image

    • 事件

      事件

      說明

      當資料介面請求完成時

      資料介面請求返回並經過過濾器處理後拋出的事件,同時拋出處理後的JSON格式的資料。具體資料樣本請參見畫布編輯器中組件右側配置面板資料來源頁簽的資料響應結果地區。

      當點擊選項按鈕時

      當單擊某個單選框按鈕時拋出的事件,同時拋出該值對應的資料項目,參考資料樣本。

      {
        "value": "A",
        "disabled": true
      }
    • 動作

      動作

      說明

      匯入資料介面

      按組件繪製格式處理資料後,匯入組件,重新繪製。不需要重新請求服務端資料,參考資料樣本。

      {
        "value": "A",
        "disabled": true
      }

      請求資料介面

      重新請求服務端資料,上遊資料處理節點或圖層節點拋出的資料將作為參數。例如單選框選取器配置了API資料來源為https://api.test,傳到請求資料介面動作的資料為{ id: '1'},則最終請求介面為https://api.test?id=1

      設定當前單選框選中值

      設定當前單選框中選中的值,參考資料樣本。

      {
        "value": "A"
      }

      擷取當前值

      擷取當前單選框中選中的值,不需要參數。

      清空組件到預設值

      還原組件到預設選中的值,不需要參數。

      移動

      將組件移動到指定位置,參考資料樣本。

          {      
            // 移動方式。絕對位置:to,相對定位:by。預設值:to。
              "positionType": "to",
            // 指定位置。x座標,y座標。
            "attr": {
              "x": 0,
              "y": 0
            },
            // 動畫方式。
            "animation": {
              "enable": false,
              // 動畫延時。
              "animationDuration": 1000,
              // 動畫曲線。可選值為:linear|easeInOutQuad|easeInOutExpo。
              "animationEasing": "linear"
            }
          }

      切換顯隱

      切換組件顯示或隱藏,不需要參數。

      顯示

      顯示組件,參考資料樣本。

      {
        "animationType": "",//動畫方式,可選值:fade,不填無動畫。
        "animationDuration": 1000,//動畫延遲,單位ms。
        "animationEasing": ""//動畫曲線
      }

      隱藏

      隱藏組件,參考資料樣本。

      {
        "animationType": "",//動畫方式,可選值:fade,不填無動畫。
        "animationDuration": 1000,//動畫延遲,單位ms。
        "animationEasing": ""//動畫曲線
      }

      更新群組件配置

      動態更新組件的樣式配置。需要先在組件的樣式面板中,單擊複製配置到剪貼簿,擷取組件配置資料。再根據需要在藍圖編輯器配置頁面的資料處理節點中更改對應樣式的欄位值。