使用 chartjs 插件 datalabels 添加一个单元标签

Question

我在 Rohit 对此问题的回答 Chart.js Show labels on Pie chart 之后提出了一个新问题

是否可以使用插件chartjs datalabels修改标签，例如添加一个单元？

感谢您的回答！

编辑：

按照 Ty 的回答，我尝试了这个：

if(type==='pie'){
        GraphOpt['plugins'] = {
            datalabels: {
              formatter: (item) => {
                return item + ' ' + label_unit;
              }
            }
        }
    }
    else{
        GraphOpt['tooltips'] = {
            callbacks: {
                label: (item) => `${item.yLabel} ${label_unit}`,
            }
        }
    }

但它仍然没有在图表上显示单位。 另外，我无法摆脱使用插件显示在条形图上的值

EDIT2：我的图形函数

function setChart(Graph, ctx, type, graph_data, labels, title, label_graph, label_unit){
    
  
    var GraphOpt = {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        },
        title: {
            display:true,
            text: title,
        },
        tooltips: {},
        plugins : {}
    }


    //graph config
    var Graph_config = {
        type: type,
        data: {
            labels: labels,
            datasets: [{
                label: label_graph,
                data: graph_data,
                backgroundColor: backgroundColor,
                borderColor: backgroundColor,
                borderWidth: 1
            }]
        },
        options: GraphOpt,
    }

    if(type==='pie'){
        GraphOpt['plugins'] = {
            datalabels: {
              formatter: (item) => {
                return item + ' ' + label_unit;
              }
            }
        }
    }
    else{
        GraphOpt['tooltips'] = {
            callbacks: {
                label: (item) => `${item.yLabel} ${label_unit}`,
            }
        }
    }
    


    //create a new graph if graph doesn't exist (init)
    console.log(typeof window[Graph])
    if(typeof window[Graph] === "undefined") {
        window[Graph] = new Chart(ctx, Graph_config);
        console.log(typeof window[Graph])
    //update if graph exist
    }else{
        console.log('Graph Update')
        //updating with new chart data
        window[Graph].config=Graph_config;
        window[Graph].title=title;
        //redraw the chart
        window[Graph].update();
    }
    
}

Answer 1

是的，看看chartjs-plugin-datalabels documentation。特别是，您希望使用 options.plugins.datalabels.formatter 选项来指定自定义函数并将单位附加到每个标签字符串。

这是一个示例 Chart.js 配置，它为每个数据标签添加一个单位：

{
  type: 'pie',
  data: {
    datasets: [
      {
        data: [84, 28, 57, 97],
        backgroundColor: [
          'rgb(255, 99, 132)',
          'rgb(255, 159, 64)',
          'rgb(255, 205, 86)',
          'rgb(75, 192, 192)',
        ],
        label: 'Dataset 1',
      },
    ],
    labels: ['Red', 'Orange', 'Yellow', 'Green'],
  },
  options: {
    plugins: {
      datalabels: {
        formatter: (val) => {
          return val + ' kg';
        }
      }
    }
  }
}