#javascript #chart.js
Вопрос:
Я строю столбчатую диаграмму в Charts.js. Я хочу, чтобы моя ось x имела 2 цвета: один цвет для значения на моей оси x, которое имеет самую высокую полосу, и другой цвет для остальных значений. Например — 
я хочу, чтобы значение «ничего не делать» было другого цвета. Вот как я строю свою диаграмму:
const myChart = new Chart(ctx, { type: 'bar', data: { labels: data.xs_action, datasets: [{ label: ['Head_1= Right Lane'], data: data.ys_H1a, backgroundColor: ['rgba(255, 99, 132, 0.2)', ], borderColor: ['rgba(255, 99, 132, 1)', ], borderWidth: 1, stack: 'Stack 0', }, { label: ['Head_2 = High Speed'], data: data.ys_H2a, backgroundColor: ['rgba(54, 162, 235, 0.2)', ], borderColor: ['rgba(54, 162, 235, 1)', ], borderWidth: 1, stack: 'Stack 0', }, { label: ['Head_3 = Change Lane'], data: data.ys_H3a, backgroundColor: ['rgba(255, 206, 86, 0.2)', ], borderColor: ['rgba(255, 206, 86, 1)', ], borderWidth: 1, stack: 'Stack 0', }, ] }, options: { scales: { x: { gridLines: { display: false, }, ticks: { color: 'blue', } }, y: { gridLines: { display: false, }, } } } }); } В моих данных у меня также есть позиция значения x, которое я хочу отобразить другим цветом.
Ответ №1:
Для этого вы можете использовать настраиваемый параметр для цвета галочки:
var options = { type: 'bar', data: { labels: ["Red", "Blue", "Yellow"], datasets: [{ label: ['Head_1= Right Lane'], data: [10, 5, 6], backgroundColor: ['rgba(255, 99, 132, 0.2)', ], borderColor: ['rgba(255, 99, 132, 1)', ], borderWidth: 1, }, { label: ['Head_2 = High Speed'], data: [2, 6, 5], backgroundColor: ['rgba(54, 162, 235, 0.2)', ], borderColor: ['rgba(54, 162, 235, 1)', ], borderWidth: 1, }, { label: ['Head_3 = Change Lane'], data: [10, 3, 4], backgroundColor: ['rgba(255, 206, 86, 0.2)', ], borderColor: ['rgba(255, 206, 86, 1)', ], borderWidth: 1, } ] }, options: { scales: { x: { stacked: true, grid: { display: false }, ticks: { color: (ctx) =gt; { const maxValues = ctx.chart.data.datasets.reduce((acc, curr) =gt; { curr.data.forEach((e, i) =gt; { if (acc[i]) { acc[i] = acc[i] e; } else { acc[i] = e; } }); return acc; }, {}); const labelIndex = ctx.chart.data.labels.indexOf(ctx.tick.label); return maxValues[labelIndex] === Math.max(...Object.values(maxValues)) ? 'blue' : 'red' } } }, y: { stacked: true, grid: { display: false } } } } } var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options); lt;bodygt; lt;canvas id="chartJSContainer" width="600" height="400"gt;lt;/canvasgt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"gt;lt;/scriptgt; lt;/bodygt; Кстати, пространство имен для сетки было изменено в версии V3 с gridLines на grid , поэтому ваши линии сетки не скрыты.