GroupAxis

  • 名稱：Group Axis（Group 圖軸）

  • 說明：Group 圖軸（預設為 X 軸，標籤文字對應 dataFormatter$ 中的 columnLabels）

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

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

chart.dataFormatter$.next({
  groupAxis: {
    label: '地區'
  }
})

params$

  • 型別：Partial<GroupAxisParams>

  • 欄位：

    名稱說明型別
    labelOffset圖軸標籤位移[number, number]
    labelColorType圖軸標籤顏色類別ColorType
    axisLineVisible顯示圖軸線boolean
    axisLineColorType圖軸線顏色類別ColorType
    ticks刻度數量
    * number: 合適數量
    * null: 自動判斷
    all: 全部    		number | null | 'all'
    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: true,
  axisLineColorType: 'primary',
  ticks: 'all',
  tickFormat: text => text,
  tickLineVisible: true,
  tickPadding: 20,
  tickFullLine: false,
  tickFullLineDasharray: 'none',
  tickColorType: 'secondary',
  tickTextRotate: 0,
  tickTextColorType: 'primary',
}