於 Vue3 上使用 Chart.js 這類自 jQuery 盛行年代既有的開源圖表套件，往往是沒有包裝好的 composable 可供使用。這篇筆記下實作的細節流程與想法。
內容
若要生成一個 Chart.js 圖表，你就得反覆使用 new Chart，並將對應的設定檔和數值傳入。在 Vue3 要反覆複製貼上這些設定值、變數時，若用 Composables 概念來實作：「將重複的程式邏輯封裝，對外僅暴露所需的變數和操作方法」，這樣一來便會輕鬆很多。
你僅需要將要顯示的資料傳入，然後後續利用對外暴露出的「刪除實體、更新內容…等」方法即可。
程式碼
以折線圖為例子，分為 3 部分。
1. useChart.ts：一個 initChart 方法 和 instance 實體 ref
2. useLineChart.ts：留有內部狀態 ( isReady, chartDatasets, selectedDatasetIndices )，然後對外暴露 createLineChart, updateChartData … 等方法
3. useLineChartInteraction.ts：與圖表互動的自訂方法
實際使用時，僅需要執行 useLineChart.ts 取出 createLineChart 方法，把自訂的設定檔傳入即可
參考資料
1. 把 Chart.js 的創建方法寫成 Composable
按讚加入粉絲團
