Anonymous
Использование разных надписей легенды для каждой кривой двухлинейного графика.
Сообщение
Anonymous » 17 ноя 2025, 20:45
Я использую Chart.js и пытаюсь построить линейную диаграмму с двумя кривыми.
Мне нужны разные стили шрифтов для меток легенды для каждой кривой.
Вот мой код:
Код: Выделить всё
const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [
{
label: 'Courbe 1',
data: [10, 20, 30, 40, 50],
borderColor: 'red',
fill: false
},
{
label: 'Courbe 2',
data: [50, 40, 30, 20, 10],
borderColor: 'blue',
fill: false
}
]
},
options: {
plugins: {
legend: {
labels: {
generateLabels: function(chart) {
const original = Chart.defaults.plugins.legend.labels.generateLabels;
const txtlab = original.call(this, chart);
txtlab.forEach(alpha => {
if(alpha.text === nom) {
alpha.font = {
size: 17,
weight: 'bold'
};
alpha.fontColor = 'blue';
}
});
return txtlab;
}
}
}
}
}
});
Этот код не учитывает размер, толщину и стиль шрифта; единственное, что работает, — это FontColor: я могу получить разные цвета шрифта для «Courbe 1» и «Courbe 2».
Подробнее здесь:
https://stackoverflow.com/questions/798 ... ines-graph
1763401523
Anonymous
Я использую Chart.js и пытаюсь построить линейную диаграмму с двумя кривыми. Мне нужны разные стили шрифтов для меток легенды для каждой кривой. Вот мой код: [code]const ctx = document.getElementById('myChart'); const myChart = new Chart(ctx, { type: 'line', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], datasets: [ { label: 'Courbe 1', data: [10, 20, 30, 40, 50], borderColor: 'red', fill: false }, { label: 'Courbe 2', data: [50, 40, 30, 20, 10], borderColor: 'blue', fill: false } ] }, options: { plugins: { legend: { labels: { generateLabels: function(chart) { const original = Chart.defaults.plugins.legend.labels.generateLabels; const txtlab = original.call(this, chart); txtlab.forEach(alpha => { if(alpha.text === nom) { alpha.font = { size: 17, weight: 'bold' }; alpha.fontColor = 'blue'; } }); return txtlab; } } } } } }); [/code] Этот код не учитывает размер, толщину и стиль шрифта; единственное, что работает, — это FontColor: я могу получить разные цвета шрифта для «Courbe 1» и «Courbe 2». Подробнее здесь: [url]https://stackoverflow.com/questions/79822604/using-different-legend-labels-for-each-curve-of-a-2-lines-graph[/url]