Блог

Мне нужно показать только значение последнего бара. нравится это изображение:

Я пробую этот код, но он показывает все значения.

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 
});

Вы можете изменить 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>