Chartjs градиентный цвет фона на основе минимальных и максимальных значений
Я использую chartjs с vue-chart для отображения некоторых данных в моем приложении, и на самом деле я хотел бы получить гистограмму с цветом фона от красного до зеленого.
График имеет динамические минимальные и максимальные значения, но он не может быть меньше 0 и больше 5. аналогично 5-звездочному рейтингу.
Чтобы показать различия в отображаемых данных, я не фиксирую график min/max от 0 до 5.
В настоящее время это код для отображения моей диаграммы:
Опции:
min составляет -0,2 от минимального значения, но не менее 0;
Макс составляет +0,2 от максимального значения, но не более 5;
return { legend: { display: false }, scales: { yAxes: [ { ticks: { beginAtZero: true, min, max, stepSize: 0.5 } } ] } }
Панель "данные диаграммы" :
return {
labels: this.labels,
datasets: [
{
label: 'Evaluation',
data: [
this.photo.composition,
this.photo.technique,
this.photo.creativity,
this.photo.content,
this.photo.lighting
],
borderWidth: 1
}
]
}
Визуализация диаграммы:
const gradient = this.$refs.canvas
.getContext('2d')
.createLinearGradient(0, 300, 0, 0)
gradient.addColorStop(0, '#FF5722')
gradient.addColorStop(0.5, '#FFC107')
gradient.addColorStop(1, '#8BC34A')
this.data.datasets[0].backgroundColor = gradient
this.renderChart(this.data, this.options)
Результат довольно близок к тому, что я ищу:
К сожалению, то, что я хотел бы видеть, - это красный цвет на 0 и зеленый на 5, поэтому градиент не должен достигать зеленого, если максимальное значение равно 2,5 (здесь я ожидал бы оранжевого), и то же самое для более низких значений... Надеюсь, в этом есть смысл. Может ли кто-нибудь указать мне правильное направление? Спасибо!
Ответы - Chartjs градиентный цвет фона на основе минимальных и максимальных значений / Chartjs gradient background color based on min and max values

03.12.2020 08:10:01
Основной API плагина предлагает ряд крючков, которые могут быть использованы для выполнения пользовательского кода. Вы можете использовать крючок afterLayout
для создания градиента для оси y, который распространяет эту желаемую область (значения от 0 до 5).
let yAxis = chart.scales["y-axis-0"];
let yBottom = yAxis.getPixelForValue(0);
let yTop = yAxis.getPixelForValue(5);
let gradient = ctx.createLinearGradient(0, yBottom, 0, yTop);
Пожалуйста, взгляните на приведенный ниже образец и посмотрите, как он работает.
const data = [2, 2.25, 3.3];
new Chart(document.getElementById("chart"), {
type: "bar",
plugins: [{
afterLayout: chart => {
let ctx = chart.chart.ctx;
ctx.save();
let yAxis = chart.scales["y-axis-0"];
let yBottom = yAxis.getPixelForValue(0);
let yTop = yAxis.getPixelForValue(5);
let gradient = ctx.createLinearGradient(0, yBottom, 0, yTop);
gradient.addColorStop(0, '#FF5722');
gradient.addColorStop(0.5, '#FFC107');
gradient.addColorStop(1, '#8BC34A');
chart.data.datasets[0].backgroundColor = gradient;
ctx.restore();
}
}],
data: {
labels: ["A", "B", "C"],
datasets: [{
label: "Evaluation",
data: data
}]
},
options: {
scales: {
yAxes: [{
ticks: {
min: Math.min(...data) - 0.2,
max: Math.max(...data) + 0.2,
stepSize: 0.5
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="chart" height="80"></canvas>