OverlappingStackedValueAxes

• 名稱：Overlapping Value Axes（重疊 Value 圖軸）

• 說明：

  • 在相同的繪圖區域內繪製兩個 Value 圖軸（左側 Y 軸和右側 Y 軸），預設會對應前兩個 Grid 資料。第一個 Y 軸用於搭配堆疊資料的圖形（目前有 MultiStackedBar），對應第一個 Grid（data$ 索引 [0] 資料）；而第二個 Y 軸搭配一般非堆疊資料的圖形（比如 MultiLines），對應第二個 Grid（data$ 索引 [1] 資料）。
  • 和 MultiValueAxis 的差別在於需搭配 dataFormatter$ 的 separateGrid 要為 false，才能正確繪製在相同繪圖區域中。

• Playground 範例

params$

• 型別：DeepPartial<OverlappingStackedValueAxesParams>

• 欄位：

  名稱	說明	型別
  firstAxis	第一個（左側） Y 軸的設定	Object
  secondAxis	第二個（右側） Y 軸的設定	Object
  gridIndexes	對應的 data$ Grid 資料索引，可對應一組或多組 Grid 資料	number[] | 'all'

• params.firstAxis 及 params.secondAxis

  名稱	說明	型別
  labelOffset	擺放位置	[number, number]
  labelColorType	和外框的間距	ColorType
  axisLineVisible	底色顏色類別	boolean
  axisLineColorType	邊框顏色類別	ColorType
  ticks	圖例的間隔距離	number | null
  tickFormat	列表圖示寬度	string | ((text: d3.NumberValue) => string | d3.NumberValue
  tickLineVisible	列表圖示高度	boolean
  tickPadding	列表圖示圓角寬度	number
  tickFullLine	文字顏色類別	boolean
  tickFullLineDasharray	文字顏色類別	string
  tickColorType	文字顏色類別	ColorType
  tickTextRotate	文字顏色類別	number
  tickTextColorType	文字顏色類別	ColorType

詳細型別

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

• 預設值：

{
  firstAxis: {
    labelOffset: [0, 0],
    labelColorType: 'primary',
    axisLineVisible: false,
    axisLineColorType: 'primary',
    ticks: 4,
    tickFormat: ',.0f',
    tickLineVisible: true,
    tickPadding: 20,
    tickFullLine: true,
    tickFullLineDasharray: 'none',
    tickColorType: 'secondary',
    tickTextRotate: 0,
    tickTextColorType: 'primary',
  },
  secondAxis: {
    labelOffset: [0, 0],
    labelColorType: 'primary',
    axisLineVisible: false,
    axisLineColorType: 'primary',
    ticks: 4,
    tickFormat: ',.0f',
    tickLineVisible: true,
    tickPadding: 20,
    tickFullLine: true,
    tickFullLineDasharray: 'none',
    tickColorType: 'secondary',
    tickTextRotate: 0,
    tickTextColorType: 'primary',
  },
  gridIndexes: [0, 1]
}