#chart.js
#chart.js
Вопрос:
Мне нужно показать только значение последнего бара. нравится это изображение:
Я пробую этот код, но он показывает все значения.
var DataX = { метки: [['Personne', 'seule'], ['Пара без', 'enfant'], ['Пара avec', 'enfant (ы)'], ['Семья', 'monoparentale'], 'Autres'], наборы данных: [{ метка: 'Данные 1', данные: [33,28,25,8,2.5], backgroundColor: '#00BBF1', Ширина границы: 0 }, { метка: 'Данные 2', данные: [29,30,30,8,2], backgroundColor: '# 3CC6F4', Ширина границы: 0 }, { метка: 'Данные 3', данные: [41,22,22,11,3], backgroundColor: '#92D9F8', Ширина границы: 0 }] }; var optionsX = { всплывающие подсказки: { включено: false }, отзывчивый: верно, Поддерживайте spectratio: false, легенда: false, масштабы: { xAxes: [{ Линии сетки: { цвет: "# fff" }, }], yAxes: [{ Линии сетки: { отображение: false }, отметки: { мин: 0, максимум: 50, Размер шага: 10, обратный вызов: функция (значение) { возвращаемое значение "%" }, } }] }, плагины: { метки данных: { цвет: '# 59595B', шрифт: { вес: 'жирный', размер: 14, }, выровнять: 'end', привязка: 'конец', форматировщик: функция (значение, контекст) { возвращаемое значение '%'; } } }, }; var ctx = document.getElementById('диаграмма-один'); var MyChart = новая диаграмма (ctx, { введите: 'bar', данные: DataX, параметры: optionsX });
Ответ №1:
Вы можете изменить plugins.datalabels.formatter
функцию следующим образом:
plugins: {
...
datalabels: {
formatter: (value, context) => context.datasetIndex == 2 ? value '%' : ''
}
}
Пожалуйста, взгляните на ваш исправленный код ниже и посмотрите, как это работает.
var dataX = {
labels: [
['Personne', 'seule'],
['Couple sans', 'enfant'],
['Couple avec', 'enfant(s)'],
['Famille', 'monoparentale'], 'Autres'
],
datasets: [{
label: 'Data 1',
data: [33, 28, 25, 8, 2.5],
backgroundColor: '#00BBF1',
borderWidth: 0
},
{
label: 'Data 2',
data: [29, 30, 30, 8, 2],
backgroundColor: '#3CC6F4',
borderWidth: 0
},
{
label: 'Data 3',
data: [41, 22, 22, 11, 3],
backgroundColor: '#92D9F8',
borderWidth: 0
}
]
};
var optionsX = {
tooltips: {
enabled: false
},
responsive: true,
maintainAspectRatio: false,
legend: false,
scales: {
xAxes: [{
gridLines: {
color: "#fff"
},
}],
yAxes: [{
gridLines: {
display: false
},
ticks: {
min: 0,
max: 50,
stepSize: 10,
callback: function(value) {
return value "%"
},
}
}]
},
plugins: {
datalabels: {
color: '#59595B',
font: {
weight: 'bold',
size: 14,
},
align: 'end',
anchor: 'end',
formatter: (value, context) => context.datasetIndex == 2 ? value '%' : ''
}
},
};
var ctx = document.getElementById('chart-one');
var myChart = new Chart(ctx, {
type: 'bar',
data: dataX,
options: optionsX
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<canvas id="chart-one"></canvas>