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

Posted 2023-02-22

【中文标题】如何仅在最后一个栏显示 chartjs 数据标签？

【英文标题】：How can I show chartjs datalabels only last bar?

【发布时间】：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 );

【参考方案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>