chartParams$

  • API chartParams$ 是全部 Plugin 共用的圖表參數設定，並且在每一個資料類別的圖表物件上參數都是一樣的，主要用來設定通用的圖表樣式和行為。

  • 所有的參數皆為可選的，如無使用此 API 則所有參數設定皆為預設值。

語法

建立 chartParams 資料的語法是 chart.chartParams$.next()

範例：

chart.chartParams$.next({
  // 此為可選的 chartParams 參數
  padding: {
    bottom: 100
  }
})

參數

  • 型別：ChartParamsPartial

  • 欄位：

    名稱說明型別
    padding根元素內和Plugin元素的間距Padding
    highlightTargetHighlight 事件發生時選取元素的範圍'series' | 'group' | 'category' | 'datum' | 'none'
    highlightDefault無事件發生時預設的 Highlight 對象 （id、seriesLabel、groupLabel 或 categoryLabel），會搭配 highlightTarget 設定的選取範圍來選取元素。string | null
    colorScheme選擇色彩模式，會切換欄位 colors 底下兩種模式設定'dark' | 'light'
    colors設定色彩（依色彩模式分別進行設定）{
    light: ColorScheme
    dark: ColorScheme
    }
    styles設定樣式Styles
    transitionDuration動畫的時間長度（毫秒）number
    transitionEase動畫的類別（d3.js的 d3-ease名稱）string

  • chartParams.padding

    名稱說明型別
    top圖表內容跟邊界間距 - 上number
    right圖表內容跟邊界間距 - 右number
    bottom圖表內容跟邊界間距 - 下number
    left圖表內容跟邊界間距 - 左number

  • chartParams.colors.light 及 chartParams.colors.dark

    名稱說明型別
    label以陣列索引對應資料標籤string[]
    labelContrastlabel 的對比顏色，主要用在覆蓋在圖形元素上的文字：
    [0] => label 為深色時的顏色
    [1] => label 為淺色時的顏色    		string
    primary主要顏色，通常是定義標籤、文字或輔助線的顏色string
    secondary次要顏色，通常是定義圖軸或背景輔助線的顏色string
    background背景色，通常是定義 Tooltip 等資訊文字底色的色塊顏色（目的是為了維持和色彩模式一致色系）string

  • chartParams.styles

    名稱說明型別
    textSize文字大小。兩種格式 (1) number 單位為 px，例：14 (2) string 可自定義單位，例：0.875remstring | number
    unhighlightedOpacityHighlight（滑鼠移過）時，其他圖形元素的透明度number

  • 預設值：

    {
  padding: {
    top: 60,
    right: 60,
    bottom: 60,
    left: 60
  },
  highlightTarget: 'datum',
  highlightDefault: null,
  colorScheme: 'light',
  colors: {
    light: {
      label: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
      labelContrast: ['#ffffff', '#1b1e23'],
      primary: '#1b1e23',
      secondary: '#e1e1e1',
      background: '#ffffff'
    },
    dark: {
      label: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
      labelContrast: ['#ffffff', '#1b1e23'],
      primary: '#f0f0f0',
      secondary: '#e1e1e1',
      background: '#000000'
    }
  },
  styles: {
    textSize: '0.875rem',
    unhighlightedOpacity: 0.3
  },
  transitionDuration: 800,
  transitionEase: 'easeCubic'
}

圖表間距設定 - chartParams.padding

padding 是根元素內和 Plugin 元素的間距，共有 top、right、bottom、left 四個欄位可以設定。

不過實際上每個 Plugin 設計上的差異會有些不同的效果，比如：

例1：Pie 類別（圓餅圖）畫出來的圖型是對齊至畫面的正中間，而圓餅圖圖形至場景的間距正是 padding 所設定的間距，因為 padding 間距愈大，圓餅圖圖形的面積就會愈小。

例2：Bars 類別（長條圖）的座標軸有 x軸和 y軸，原點預設是在左下角；X 軸會對齊至根元素底部往上加上 bottom 設定的間距、Y 軸會對齊至根元素左側往右加上 left 設定的間距。

Highlight 對象 - chartParams.highlightTarget

設定 highlight 事件時選取資料的對象。一般是由滑鼠經過特定圖案元素上時觸發，這些元素都能經由 id 或 label 對應到相對應的資料。而對應的方式分別有'series' 、'group'、category、'datum' 、'none' 共四種，說明如下：

  • series：在「Series」、「Grid」、「MultiGrid」這三種資料類型當中，取得被觸發元素的資料上的 seriesLabel，選取所有相同 seriesLabel 的元素。
  • group：在「Grid」、「MultiGrid」這兩種資料類型當中，取得被觸發元素的資料上的 groupLabel，選取所有相同 groupLabel 的元素。
  • category：在「MultiValue」、「Relationship」、「Tree」三種資料類型中，取得被觸發元素的資料上的 categoryLabel，選取所有相同 categoryLabel 的元素。
  • datum：在所有資料類型中，觸發 highlight 事件時僅選取被觸發元素。
  • none：無highlight事件。