ValueAxis

• 名稱：Value Axis（Value 圖軸）

• 說明：Value 圖軸（預設為 Y 軸）

• 使用方式：圖軸的格式會搭配 dataFormatter 的 valueAxis 欄位設定，詳細 API 請參考文件（不過大部份情況下如已使用 Preset 則不太需要自行設定 dataFormatter，較常使用的是圖軸標籤的設定）

• 圖軸標籤設定：使用 dataFormatter 的 valueAxis.label 設定標籤文字，範例如下：

chart.dataFormatter$.next({
  valueAxis: {
    label: '數量'
  }
})

• Playground 範例

params$

• 型別：Partial<ValueAxisParams>

• 欄位：

  名稱	說明	型別
  labelOffset	圖軸標籤位移	[number, number]
  labelColorType	圖軸標籤顏色類別	ColorType
  axisLineVisible	顯示圖軸線	boolean
  axisLineColorType	圖軸線顏色類別	ColorType
  ticks	刻度數量 * number: 合適數量 * null: 自動判斷	number | null
  tickFormat	刻度文字格式 * string: 以 d3-format格式 進行註記 * Function: 自訂 function 回傳顯示文字)	string | ((text: d3.NumberValue) => string | d3.NumberValue
  tickLineVisible	顯示刻度線	boolean
  tickPadding	刻度和文字的距離	number
  tickFullLine	將刻度線顯示在整個場景上	boolean
  tickFullLineDasharray	設定刻度線虛線格式（搭配tickFullLine為true）	string
  tickColorType	刻度顏色類別	ColorType
  tickTextRotate	刻度文字旋轉	number
  tickTextColorType	刻度文字顏色類別	ColorType

詳細型別

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

• 預設值：

{
  labelOffset: [0, 0],
  labelColorType: 'primary',
  axisLineVisible: false,
  axisLineColorType: 'primary',
  ticks: null,
  tickFormat: num => {
    if (num === null || Number.isNaN(num) == true) {
      return num || 0
    }
    var parts = num.toString().split('.')
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    return parts.join('.')
  },
  tickLineVisible: true,
  tickPadding: 20,
  tickFullLine: true,
  tickFullLineDasharray: 'none',
  tickColorType: 'secondary',
  tickTextRotate: 0,
  tickTextColorType: 'primary'
}