通过chart.js在多系列甜甜圈图表中添加标签

Question

我已经在react应用程序中使用chart.js实现了多系列甜甜圈图表。我想要将图表内的每个部分的标签都显示为内图表和外图表中的文本。为了实现这一点，我尝试了chart plugin-labels。但它只适用于外部图表标签。有人对此有什么解决方案吗？

下面是我发现的一个与我的实现类似的演示应用程序，以供参考。demo

图表的内部文本标签应用的一部分如下：

var refChart = document.getElementById("dchart");
var chartConfig = new Chart(refChart, {
            type: 'doughnut',
            data: {
                datasets: [
                   {
                    data: [4, 3, 3, 2],
                    label: 'data1',
                    labels: ['A','C','B','C']
                   }, 
                   {
                    data: [5, 3, 2],
                    label: 'data2',
                    labels: ['X','Y','Z'],
                   }]
                 },

             options:{
                  responsive: true,
                  maintainAspectRatio:false,
                  legend: {
                    display: true,
                    position: 'bottom',
                         }
                  plugins:{
                    labels:{
                        render:"label",
                        arc:true,
                           }
                         }
                     }
        });

Answer 1

根据我对你的解释的理解，chart.js的datalabels插件提供了你想要的东西：

示例：https://chartjs-plugin-datalabels.netlify.app/samples/charts/doughnut.html

Github：https://github.com/chartjs/chartjs-plugin-datalabels