如何在图表饼图中添加“%”（chartjs）

Posted 2023-02-22

【中文标题】如何在图表饼图中添加“%”（chartjs）

【英文标题】：how to put "%" in chart pie (chartjs)

【发布时间】：2019-05-07 11:16:51

【问题描述】：

我需要在图表中的数字后面加上 %：

喜欢：100%

这是我用来制作图表的代码，使用图表 js：

new Chart(document.getElementById("pie-chart-one"), 
    type: 'doughnut',
    data: 
        labels: ['Transmitidas', 'Não Transmitidas'],
        datasets: [
            data: [@Model.PorcentQtdDeclaracoesStatusTransmitida, @Model.PorcentQtdDeclaracoesStatusNaoTransmitida],
            backgroundColor: backgroudColor,
            borderWidth: 1,
        ]
    ,
    options: 
        legend: 
            display: true,
            position: 'bottom',
            fontSize: 10

        ,
       responsive:false,
       fontsize: 11,
       layout: 
           padding: 
               left: 0,
               right: 0,
               top: 30,
               bottom: 30
           
        
    
);

【参考方案1】：

在选项定义中...

options: 
        tooltips: 
            enabled: true,
            mode: 'single',
            callbacks: 
                label: function(tooltipItems, data)  
                    return tooltipItems.yLabel + ' %';
                
            
        ,
  

【讨论】：

它不起作用，只显示“%”而不是所有文本。抱歉，我不知道为什么它不起作用。看起来不错。

请您查看您使用的chartjs版本

【参考方案2】：

我在工具提示中使用回调和标题来解决问题：

options: 
        tooltips: 
            callbacks: 
                label: function (tooltipItem, data) 
                    var dataset = data.datasets[tooltipItem.datasetIndex];
                    var total = dataset.data.reduce(function (previousValue, currentValue, currentIndex, array) 
                        return previousValue + currentValue;
                    );
                    var currentValue = dataset.data[tooltipItem.index];
                    var percentage = Math.floor(((currentValue / total) * 100) + 0.5);
                    return percentage + "%";
                ,                    
                title: function (tooltipItem, data) 
                    return data.labels[tooltipItem[0].index];