RacingBars

• 名稱：RacingBars（賽跑長條圖）

• 說明：內建計數器來顯示 value 中第 0 筆資料到最後一筆資料。

• Playground 範例

params$

• 型別：DeepPartial<RacingBarsParams>

• 欄位：

  名稱	說明	型別
  bar	長條圖的設定	Object
  barLabel	資料 label 的顯示設定	Object
  valueLabel	資料 value 的顯示設定	Object
  axisLabel	X軸標籤的顯示設定	Object
  rankingAmount	排名數量（顯示項目數量），預設為10，如設定為 'auto' 會在空間足夠下將所有資料顯示出來	'auto' | number
  autorun	賽跑啟動狀態，預設是靜止不動的，設定為 true 後才會開始跑	boolean
  loop	設定賽跑為重覆執行不停止	boolean

• params.bar

  名稱	說明	型別
  barWidth	各別 Bar 寬度	number
  barPadding	Bar 間距	number
  barRadius	Bar 圓角寬度	boolean

• params.barLabel

  名稱	說明	型別
  position	擺放位置	'inside' | 'outside' | 'none'
  padding	間距	number
  colorType	標籤顏色類別	ColorType

• params.valueLabel

  名稱	說明	型別
  padding	間距	number
  colorType	標籤顏色類別	ColorType
  format	標籤顯示文字的函式	string | ((text: d3.NumberValue) => string | d3.NumberValue

• params.axisLabel

  名稱	說明	型別
  offset	圖軸標籤擺放位置	[number, number]
  colorType	標籤顏色類別	ColorType

詳細型別

type ColorType = 'none' | 'label' | 'labelContrast' | 'primary' | 'secondary' | 'background'

• 預設值：

{
  bar: {
    barWidth: number
    barPadding: number
    barRadius: number | boolean
  }
  barLabel: {
    position: 'inside' | 'outside' | 'none'
    padding: number
    rotate: number
    colorType: ColorType
  }
  valueLabel: {
    padding: number
    colorType: ColorType
    format: string | ((text: d3.NumberValue | null) => string | d3.NumberValue)
  }
  axisLabel: {
    offset: [number, number]
    colorType: ColorType
  }
  rankingAmount: 'auto' | number
  autorun: boolean
  loop: boolean
}