- Description:
| Name | Type | Default value | Required? | Description |
|---|---|---|---|---|
items |
Array | [] |
No | 輸入項目的物件陣列，預設[] |
width |
Number | 230 |
No | 輸入組件寬度數字，單位為px，預設230 |
height |
Number | 600 |
No | 輸入組件寬度數字，單位為px，預設600 |
paddingStyle |
Object | {top:10,bottom:10,left:50,right:0} |
No | 輸入內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，但因組件無法自動計算text寬度故right無效。單位為px，預設{top:10,bottom:10,left:50,right:0} |
keyValueStart |
String | 'valueStart' |
No | 輸入項目物件存放起始值之欄位字串，預設'valueStart' |
keyValueEnd |
String | 'valueEnd' |
No | 輸入項目物件存放結束值之欄位字串，預設'valueEnd' |
keyText |
String | 'text' |
No | 輸入項目物件存放顯示文字之欄位字串，預設'text' |
valueMin |
Number | null |
No | 輸入項目陣列內全部值之最小值數字，預設null |
valueMax |
Number | null |
No | 輸入項目陣列內全部值之最大值數字，預設null |
title |
String | 'left' |
No | 輸入軸標題文字字串，可選'left'與'right'，預設'left' |
titleColor |
String | '#444' |
No | 輸入軸標題文字顏色字串，預設'#444' |
titleFontSize |
String | '1rem' |
No | 輸入軸標題文字字型大小字串，預設'1rem' |
titleShift |
Number | null |
No | 輸入軸標題與左側軸距離數字，單位為px，若給null則自動使用值為-paddingStyle.left+12，預設null |
alignStart |
String | 'left' |
No | 輸入項目起始值刻度文字對齊字串，可選'left'與'right'，預設'left' |
alignEnd |
String | 'right' |
No | 輸入項目結束值刻度文字對齊字串，可選'left'與'right'，預設'right' |
funFormatTickValue |
function | null |
No | 輸入處理項目數據之刻度值用以顯示函數，預設null |
axisColor |
String | '#666' |
No | 輸入軸顏色字串，預設'#666' |
tickColor |
String | '#666' |
No | 輸入刻度顏色字串，預設'#666' |
tickSize |
Number | 5 |
No | 輸入刻度尺寸(為單側寬度)數字，單位為px，預設5 |
tickLabelColor |
String | '#666' |
No | 輸入刻度文字顏色字串，預設'#666' |
tickLabelFontSize |
String | '0.7rem' |
No | 輸入刻度文字字型大小字串，預設'0.7rem' |
segmentBackgroundType |
String | 'color' |
No | 輸入區塊背景類型字串，可選'color'或'image'，預設'color' |
segmentBackgroundImage |
String | '' |
No | 輸入區塊背景圖片字串，通過background-image:url(...)設定，預設'' |
funSegmentBackgroundImage |
function | null |
No | 輸入處理項目數據之區塊背景圖片函數，預設null |
segmentBackgroundImageSize |
String | '75%' |
No | 輸入區塊背景圖片尺寸字串，預設'75%' |
segmentBackgroundColor |
String | '#FFB74D' |
No | 輸入區塊背景顏色字串，預設'#FFB74D' |
funSegmentBackgroundColor |
function | null |
No | 輸入處理項目數據之區塊背景函數，預設null |
segmentBorderColor |
String|Object | '#FFB74D' |
No | 輸入區塊邊框顏色字串或物件，給予物件時可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，預設'#FB8C00' |
funSegmentBorderColor |
function | null |
No | 輸入處理項目數據之區塊邊框函數，預設null |
segmentSize |
Number | 6 |
No | 輸入區塊尺寸(為兩側總寬度)數字，單位為px，預設6 |
textWithPopup |
Boolean | false |
No | 輸入項目文字是否可點擊顯示popup彈窗布林值，預設false |
textFontSize |
String | '0.7rem' |
No | 輸入項目文字區之文字字型大小字串，預設'0.7rem' |
textColor |
String | '#222' |
No | 輸入項目文字區之文字顏色字串，預設'#222' |
textBackgroundColor |
String | '#ddd' |
No | 輸入項目文字區之背景顏色字串，預設'#ddd' |
textTriangularSize |
Number | 15 |
No | 輸入項目文字區之箭頭長度數字，單位為px，若textTriangularSize/textTriangularRatio*2小於項目文字區高度時則會破圖，預設15 |
textTriangularRatio |
Number | 1.5 |
No | 輸入項目文字區之箭頭長寬比值數字，若textTriangularSize/textTriangularRatio*2小於項目文字區高度時則會破圖，預設1.5 |
textShift |
Number | null |
No | 輸入項目文字區與左側軸距離數字，單位為px，若給null則自動使用值為1+segmentSize/2+paddingStyle.left，預設null |
textCanClick |
Boolean | false |
No | 輸入項目文字是否可點擊布林值，預設false |
segmentCanClick |
Boolean | false |
No | 輸入區塊是否可點擊布林值，預設false |
| Name | Type | Default value | Required? | Description |
|---|---|---|---|---|
items |
Array | [] |
No | 輸入項目的物件陣列，預設[] |
width |
Number | 230 |
No | 輸入組件寬度數字，單位為px，預設230 |
height |
Number | 600 |
No | 輸入組件寬度數字，單位為px，預設600 |
paddingStyle |
Object | {top:10,bottom:10,left:50,right:0} |
No | 輸入內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，但因組件無法自動計算text寬度故right無效。單位為px，預設{top:10,bottom:10,left:50,right:0} |
keyValueStart |
String | 'valueStart' |
No | 輸入項目物件存放起始值之欄位字串，預設'valueStart' |
keyValueEnd |
String | 'valueEnd' |
No | 輸入項目物件存放結束值之欄位字串，預設'valueEnd' |
keyText |
String | 'text' |
No | 輸入項目物件存放顯示文字之欄位字串，預設'text' |
valueMin |
Number | null |
No | 輸入項目陣列內全部值之最小值數字，預設null |
valueMax |
Number | null |
No | 輸入項目陣列內全部值之最大值數字，預設null |
title |
String | 'left' |
No | 輸入軸標題文字字串，可選'left'與'right'，預設'left' |
titleColor |
String | '#444' |
No | 輸入軸標題文字顏色字串，預設'#444' |
titleFontSize |
String | '1rem' |
No | 輸入軸標題文字字型大小字串，預設'1rem' |
titleShift |
Number | null |
No | 輸入軸標題與左側軸距離數字，單位為px，若給null則自動使用值為-paddingStyle.left+12，預設null |
alignStart |
String | 'left' |
No | 輸入項目起始值刻度文字對齊字串，可選'left'與'right'，預設'left' |
alignEnd |
String | 'right' |
No | 輸入項目結束值刻度文字對齊字串，可選'left'與'right'，預設'right' |
funFormatTickValue |
function | null |
No | 輸入處理項目數據之刻度值用以顯示函數，預設null |
axisColor |
String | '#666' |
No | 輸入軸顏色字串，預設'#666' |
tickColor |
String | '#666' |
No | 輸入刻度顏色字串，預設'#666' |
tickSize |
Number | 5 |
No | 輸入刻度尺寸(為單側寬度)數字，單位為px，預設5 |
tickLabelColor |
String | '#666' |
No | 輸入刻度文字顏色字串，預設'#666' |
tickLabelFontSize |
String | '0.7rem' |
No | 輸入刻度文字字型大小字串，預設'0.7rem' |
segmentBackgroundType |
String | 'color' |
No | 輸入區塊背景類型字串，可選'color'或'image'，預設'color' |
segmentBackgroundImage |
String | '' |
No | 輸入區塊背景圖片字串，通過background-image:url(...)設定，預設'' |
funSegmentBackgroundImage |
function | null |
No | 輸入處理項目數據之區塊背景圖片函數，預設null |
segmentBackgroundImageSize |
String | '75%' |
No | 輸入區塊背景圖片尺寸字串，預設'75%' |
segmentBackgroundColor |
String | '#FFB74D' |
No | 輸入區塊背景顏色字串，預設'#FFB74D' |
funSegmentBackgroundColor |
function | null |
No | 輸入處理項目數據之區塊背景函數，預設null |
segmentBorderColor |
String|Object | '#FFB74D' |
No | 輸入區塊邊框顏色字串或物件，給予物件時可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，預設'#FB8C00' |
funSegmentBorderColor |
function | null |
No | 輸入處理項目數據之區塊邊框函數，預設null |
segmentSize |
Number | 6 |
No | 輸入區塊尺寸(為兩側總寬度)數字，單位為px，預設6 |
textWithPopup |
Boolean | false |
No | 輸入項目文字是否可點擊顯示popup彈窗布林值，預設false |
textFontSize |
String | '0.7rem' |
No | 輸入項目文字區之文字字型大小字串，預設'0.7rem' |
textColor |
String | '#222' |
No | 輸入項目文字區之文字顏色字串，預設'#222' |
textBackgroundColor |
String | '#ddd' |
No | 輸入項目文字區之背景顏色字串，預設'#ddd' |
textTriangularSize |
Number | 15 |
No | 輸入項目文字區之箭頭長度數字，單位為px，若textTriangularSize/textTriangularRatio*2小於項目文字區高度時則會破圖，預設15 |
textTriangularRatio |
Number | 1.5 |
No | 輸入項目文字區之箭頭長寬比值數字，若textTriangularSize/textTriangularRatio*2小於項目文字區高度時則會破圖，預設1.5 |
textShift |
Number | null |
No | 輸入項目文字區與左側軸距離數字，單位為px，若給null則自動使用值為1+segmentSize/2+paddingStyle.left，預設null |
textCanClick |
Boolean | false |
No | 輸入項目文字是否可點擊布林值，預設false |
segmentCanClick |
Boolean | false |
No | 輸入區塊是否可點擊布林值，預設false |