使用預設集 (Preset)

預設集 (preset) 是 OrbCharts 中相當重要的一個功能，一般情況下，建議大多數使用者在一開始建立圖表時可直接選擇預設集 (preset) 使用。

Preset 顧名思義就是一組預先設置的參數集合，主要用途有兩個：

將系統原有的預設值給覆蓋掉，操作圖表時避免一直重覆設定相同的參數。
降低使用門檻，提供開發者快速建立一個預先設定好的基礎樣式。

內建 Preset

引入方式：

import { PRESET_PIE_DONUT } from 'orbcharts'

使用範例：

import { SeriesChart, PRESET_PIE_DONUT } from 'orbcharts'

const chart = new SeriesChart(element, {
  preset: PRESET_PIE_DONUT
})

在遊樂場中取得 Preset 範例

所有可用的 Preset 在「遊樂場」中都有使用範例：

你可以先在左側選單中選擇所要使用的圖表類型 → 接著點選「Preset」選單選取 →

透過實時的圖表呈現，找出你所需要的圖表及 Preset 組合，你可以在中間的「Demo Code」程式編輯器當中參考使用方式。

客製 Preset

Preset 物件是一個全部由可選欄位建立的物件，因此要客製 Preset 物件是非常簡單的事情，只需使用 {} 建立一個 Object 之後，按自己需要加入所需的欄位參數即可。

欄位說明

型別：PresetPartial<T extends ChartType, AllPluginParams>

欄位：

名稱	說明	型別
chartParams	`chartParams$` 參數	`ChartParamsPartial`
dataFormatter	`dataFormatter$` 參數	`DataFormatterPartialTypeMap<T>`
pluginParams	所有 Plugin 的 `params$` 參數： key: Plugin名稱 value: Plugin Params（可選的）	`{ [key: string]: any }`

範例

const PRESET_CUSTOM_EXAMPLE = {
  chartParams: {
    padding: {
      top: 40,
      right: 40,
      bottom: 140,
      left: 80
    }
  },
  dataFormatter: {
    groupAxis: {
      scalePadding: 0
    }
  },
  pluginParams: {
    GroupAxis: {
      tickPadding: 15,
      tickTextRotate: -30
    },
    GroupAux: {
      labelRotate: -30
    },
    GridLegend: {
      placement: 'bottom',
      padding: 14,
      listRectHeight: 2
    }
  }
}

const element = document.querySelector('#chart')

const chart = new GridChart(element, {
  preset: PRESET_CUSTOM_EXAMPLE
})