建立 Plugin

本章節主要是在說明建立 Plugin 物件、以及 Plugin 物件所能使用的 API。

Plugin 類別

每一個 Plugin 都有其所屬的資料類別，也就是說他必須用在相同資料類別的圖表類別（SeriesChart, GridChart...等）建立的圖表物件上。

引入方式：

import { Pie } from 'orbcharts'

Plugin 物件

Plugin 物件是由「Plugin 類別」使用 new 關鍵字創建而來的。

比如：

import { Pie } from 'orbcharts'

const pie = new Pie()

Plugin 物件要加入到圖表當中，必須和圖表物件上的 plugins$ API 來搭配使用，在這邊使用 Pie 和 PieLabels 來作範例：

import { SeriesChart, Pie } from 'orbcharts'

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

const chart = new SeriesChart(element)

const pie = new Pie()

const pieLabels = new PieLabels()

chart.plugins$.next([ pie, pieLabels ])

Plugin 物件的 params$

Plugin 物件上有提供一個 API params$ 可設定 Plugin 物件的參數，每一個 Plugin 都有各自的參數可以設定（詳細請參閱文件），所有的參數都是可選的。

• 語法：

plugins.params$.next(Params)

• 範例：

const pie = new Pie()
const pieLabels = new PieLabels()

pie.params$.next({
  // 設定 params 參數
})
pieLabels.params$.next({
  // 設定 params 參數
})

chart.plugins$.next([pie, pieLabels])

要使用 params$，並沒有限制是在 Plugin 物件被加入到圖表物件之前、或者被加入到圖表物件之後，無論順序如何不影響繪圖結果。

比如把 params$ 的操作擺在之後的寫法結果如下，這樣寫的話結果是一樣的：

const pie = new Pie()
const pieLabels = new PieLabels()

chart.plugins$.next([pie, pieLabels])

pie.params$.next({
  // 設定 params 參數
})
pieLabels.params$.next({
  // 設定 params 參數
})

TIP

RxJS 在處理資料流事件是非同步的，OrbCharts 會在內部搜集完所有 API 建立的資料並合併以及計算之後，才會傳給繪圖函式，所以先後順序不會有差別