[筆記] Chart.js 長條圖最大值用特別顏色表示 @地瓜大的飛翔旅程

章節連結

思路邏輯
程式碼
參考資料

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

思路邏輯

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

程式碼

// dummy data
let data = [12, 19, 1, 14, 3, 10, 9]; 
let labels = data.map((x, i) => i.toString()) // 產生[1,2,3,4.....] 的數列當作 x 軸

// 產生基本顏色的陣列
let colorList = data.map(x => 'rgba(75,192,192,0.4)');

// 改變顏色函式，運用 .map() 取得每一項的值和 index
// 再用 .reduce() 來前後比較：若後一項的值大於前一項的值，那就回傳後一項，否則反之
// 最後會找到最大項的值和index，用 array[1] 取得 index
function changeMaxColor(array) {
  return array.map((x, i) => [x, i]).reduce((r, a) => (a[0] > r[0] ? a : r))[1];
}

// 取得最大值所在陣列的 index 位置後，將顏色換掉 
colorList[changeMaxColor(data)] = 'red';

// 在對應 html 位置中生成圖表
let ctx = document.getElementById("myChart");
let myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                    label: 'value',
                    data: data,
                    backgroundColor: colorList,
            }]
        }
});

// dummy data

let data = [12, 19, 1, 14, 3, 10, 9];

let labels = data.map((x, i) => i.toString()) // 產生[1,2,3,4.....] 的數列當作 x 軸

// 產生基本顏色的陣列

let colorList = data.map(x => 'rgba(75,192,192,0.4)');

// 改變顏色函式，運用 .map() 取得每一項的值和 index

// 再用 .reduce() 來前後比較：若後一項的值大於前一項的值，那就回傳後一項，否則反之

// 最後會找到最大項的值和index，用 array[1] 取得 index

function changeMaxColor(array) {

return array.map((x, i) => [x, i]).reduce((r, a) => (a[0] > r[0] ? a : r))[1];

}

// 取得最大值所在陣列的 index 位置後，將顏色換掉

colorList[changeMaxColor(data)] = 'red';

// 在對應 html 位置中生成圖表

let ctx = document.getElementById("myChart");

let myChart = new Chart(ctx, {

type: 'bar',

data: {

labels: labels,

datasets: [{

label: 'value',

data: data,

backgroundColor: colorList,

}]

}

});

參考資料

Chart.js changing the color of the max value bar

按讚加入粉絲團

思路邏輯

程式碼

參考資料

延伸閱讀