RacingCounterTexts

• 名稱：RacingCounterTexts（計數顯示文字）

• 說明：主要是用來搭配 RacingBars 使用的計數器顯示文字。

• 使用方式：文字會對應 dataFormatter.xAxis.valueLabels[]，依照目前計數器的數字對應到 valueLabels[] 陣列中相對應的文字。如果 valueLabels[] 沒有設定文字的話，預設就會以數字方式以 0 跑到 value 的最後一筆的筆數。

• Playground 範例

params$

• 型別：Partial<RacingCounterTextsParams>

• 欄位：

  名稱	說明	型別
  renderFn	文字顯示函式，如果回傳值為陣列則顯示為多行文字	(valueLabel: string, valueIndex: number, data: ComputedDataMultiValue) => string[] | string
  textAttrs	每行文字的 attribute	Array<{ [key:string]: string | number }>
  textStyles	每行文字的 style	Array<{ [key:string]: string | number }>
  paddingRight	右邊間距	number
  paddingBottom	下面間距	number

詳細型別

export type ComputedDataMultiValue = ComputedDatumMultiValue[][]

interface ComputedDatumMultiValue {
  id: string
  index: number
  label: string
  visible: boolean
  data: any
  datumIndex: number
  value: number[]
  color: string
  categoryIndex: number
  categoryLabel: string
}

• 預設值：

{
  renderFn: (valueLabel: string, valueIndex: number, data: ComputedDataTypeMap<'multiValue'>) => {
    return valueLabel
  },
  textAttrs: [
    {
      "transform": "translate(0, 0)"
    }
  ],
  textStyles: [
    {
      "font-weight": "bold",
      "text-anchor": "end",
      "pointer-events": "none",
      "dominant-baseline": "auto",
      "font-size": 64,
      "fill": "#bebebe"
    },
    {
      "text-anchor": "end",
      "pointer-events": "none",
      "dominant-baseline": "auto",
      "font-size": 24,
      "fill": "#bebebe"
    },
  ],
  paddingRight: 0,
  paddingBottom: 0
}