如何仅在最后一个栏显示 chartjs 数据标签？答案

【问题标题】：How can I show chartjs datalabels only last bar?如何仅在最后一个栏显示 chartjs 数据标签？
【发布时间】：2020-12-24 23:04:06
【问题描述】：

我只需要显示最后一个柱值。像这张图片：

我尝试了这段代码，但它显示了所有值。

变量数据X = { 标签：[['Personne', 'seule'], ['Couple sans', 'enfant'], ['Couple avec', 'enfant(s)'], ['Famille', 'monoparentale'], 'Autres '], 数据集：[{ 标签：'数据1'，数据：[33,28,25,8,2.5]，背景颜色：'#00BBF1', 边框宽度：0 }, { 标签：“数据2”，数据：[29,30,30,8,2]，背景颜色：'#3CC6F4', 边框宽度：0 }, { 标签：“数据3”，数据：[41,22,22,11,3]，背景颜色：'#92D9F8', 边框宽度：0 }] }; 变种选项X = { 工具提示：{ 启用：假 }, 响应式：真实，保持纵横比：假，传说：假，秤：{ x轴：[{ 网格线： { 颜色：“#fff” }, }], y轴：[{ 网格线： { 显示：假 }, 滴答声：{ 分钟：0，最大：50，步长：10，回调：函数（值）{ 返回值 + "%" }, } }] }, 插件：{ 数据标签：{ 颜色：'#59595B', 字体：{ 重量：'粗体'，尺寸：14， }, 对齐：'结束'，锚：'结束'，格式化程序：函数（值，上下文）{ 返回值 +'%'; } } }, }; var ctx = document.getElementById('chart-one'); var myChart = new Chart(ctx, { 类型：'酒吧'，数据：数据X，选项：选项X });

【问题讨论】：

标签： chart.js

【解决方案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>

【讨论】：