XYAxes

• 名稱：X And Y Axes（X 及 Y 圖軸）

• 說明：MultiValue 資料類別使用的 X, Y 圖軸，value 索引 [0], [1] 資料分別對應 X , Y 軸座標。

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

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

chart.dataFormatter$.next({
  xAxis: {
    label: 'x'
  },
  yAxis: {
    label: 'y'
  }
})

• Playground 範例

params$

• 型別：DeepPartial<XYAxesParams>

• 欄位：

  名稱	說明	型別
  xAxis	X 軸設定	Object
  yAxis	Y 軸設定	Object

• params.xAxis, params.yAxis

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

詳細型別

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

• 預設值：

{
  xAxis: {
    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',
    tickTextColorType: 'primary'
  },
  yAxis: {
    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',
    tickTextColorType: 'primary'
  }
}