範例

最簡範例 - 圓餅圖

以圓餅圖為例，畫出一張圖表最少所需要的參數包含 plugins$, data$ 才畫得出來：

import { SeriesChart, Pie } from 'orbcharts'

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

const chart = new SeriesChart(element)

chart.plugins$.next([new Pie()])

chart.data$.next([
  [80,120,45],
  [50,30,15,28],
  [55,13,38,10,5]
])

圓餅圖加上文字標籤、圖例、SeriesTooltip

透過 plugins$可以按照需求加入其他（相同都是 Series 資料結構）的 Plugin：

import { SeriesChart, Pie, PieLabels, SeriesLegend, SeriesTooltip } from 'orbcharts'

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

const chart = new SeriesChart(element)

chart.plugins$.next([new Pie(), new PieLabels(), new SeriesLegend(), new SeriesTooltip()])

chart.data$.next([
  [80,120,45],
  [50,30,15,28],
  [55,13,38,10,5]
])

在 Playground 中展示

甜甜圈圖 - 使用Preset（預設集）

要修改圖形（已加入的 Plugin）的呈現方式，最簡單的方式就是使用 OrbCharts 幫你設定好的 Preset（預設集）：

import { SeriesChart, Pie, PieEventTexts, PieLabels, SeriesLegend, SeriesTooltip, PRESET_PIE_DONUT } from 'orbcharts'

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

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

chart.plugins$.next([new Pie(), new PieEventTexts, new PieLabels(), new SeriesLegend(), new SeriesTooltip()])

chart.data$.next([
  [80,120,45],
  [50,30,15,28],
  [55,13,38,10,5]
])

實際上 Preset 做的事情就是修改掉特定 API 的預設參數，你仍然可以自行透過 API 來做到一模一樣的效果。

在 Playground 中展示

甜甜圈圖 - 自定義參數

如果不想使用 Preset、或者 Preset 無法做到你想調整的地方，可以自行透過 chartParams$, dataFormatter$ 等 API 來自訂定你的圖形樣式或行為。這裡僅用一個簡單的範例來展示，你可在本文件的後續章節中了解更詳細的內容。

import { SeriesChart, Pie, PieLabels, SeriesLegend, SeriesTooltip, PRESET_PIE_DONUT } from 'orbcharts'

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

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

const seriesLegend = new SeriesLegend()
seriesLegend.params$.next({
  placement: 'right-end'
})

const pie = new Pie()
pie.params$.next({
  outerRadius: 0.85,
  innerRadius: 0.5,
})

chart.dataFormatter$.next([
  separateSeries: true
])
chart.plugins$.next([new Pie(), new PieLabels(), seriesLegend, new SeriesTooltip()])
chart.data$.next([
  [80,120,45],
  [50,30,15,28],
  [55,13,38,10,5]
])