[筆記] Chart.js 長條圖 最大值用特別顏色表示

章節連結

前端圖表的軍火庫 Chart.js,雖說可以滿足大部分的圖表需求,但還是有一些客製化的案件會發生。這回遇上的情況是要在長條圖中,將最大值另外標示成其他顏色。以下為筆記解決的步驟,其實意料之外的簡單。
chart ruler pencil


思路邏輯

1. 先將每一筆的 data 陣列資料,分別對應「基本顏色」陣列資料
2. 找出 data 陣列中的最大值,並回傳其 index 位置,將新顏色輸入顏色陣列
3. 開始作圖

程式碼


參考資料

Chart.js changing the color of the max value bar

按讚加入粉絲團

延伸閱讀

GA瀏覽人氣:43