隐藏 Doghnut/Pie 图表切片上的标签 Angular ng2-charts

Question

我已经开始将 ng2-charts 与 Angular 一起使用，我需要隐藏 text/value 出现在 doughnut/Pie 图表的切片上，如下面的屏幕截图所示并突出显示

下面是我的代码

pieChartOptions = {
        responsive: true,
        maintainAspectRatio: false,
        tooltips:{
          callbacks: {
            label: (ttItem,data) => (`${data.labels[ttItem.index]}: ${data.datasets[ttItem.datasetIndex].data[ttItem.index]}%`)
          }
        },
        plugins: {
          display:false,
          // labels: {
          //   // render: 'percentage',
          //   // fontColor: ['red', 'red', 'red'],
          //   // precision: 2,
          //   display:false
          // },
          datalabels: false ,
          label:false,
        },
        legend: {
          position: 'bottom',
          labels: {
            fontColor: "black",
            boxWidth: 15,
            padding: 10,
            fontFamily: 'Poppins ',
            fontSize: 12,
          },  
        },
        animation: {
          animateScale: true,
          animateRotate: true
        }
    };
    isPieChartPercentage :boolean = true;
    pieChartColors = [
        {
          backgroundColor: [
            'rgb(144, 238, 144)',
            '#ADD8E6',
            '#ffff80',
            '#e0eafc',
            '#f0b961',
            'black'
          ]
        }
    
      ]

我试过这些东西，但对我不起作用

options: {
  datalabels: {
    display: false, //not working
  },
}

options: {
  labels: {
    display: false // not working
  },
}

options: {
  labels:false  //not working
}

我们将不胜感激。

Answer 1

我看到您正在尝试从图表中删除标签，即从图表的饼图中删除标签。因此，如果您不知道标签来自 "chartjs-plugin-labels"

，请通知您

要不你把它去掉，不行你试试下面的解决方法

     plugins: {
          labels: {
            render: function (args) {
              return   "";
            },
            fontColor: ['black', 'black', 'black'],
            precision: 2,
          }
        },

隐藏 Doghnut/Pie 图表切片上的标签 Angular ng2-charts

Hide label on slice of Doghnut/Pie Chart Angular ng2-charts

javascript

charts

chart.js

ng2-charts

angular