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

debugcn 发表于 Dev

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

这是我发现与我的实现类似的一个演示应用程序，仅供参考。演示

下面介绍了为图表应用内部文本标签的一部分：

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,
                           }
                         }
                     }
        });

李·莱纳利

从我对您的解释的理解中，chart.js的datalabels插件具有您正在寻找的东西：

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。