ChartJs-饼图-如何删除饼图上的标签

时间:2019-04-24 16:58:27

标签: angular chart.js chartjs-2.6.0

我正在使用chart.js中的饼图在应用程序中进行可视化。 我正在使用带有chartjs-plugin-piechart-outlabels的插件来将标签显示为饼图中的细分。

一切正常,除了饼图上存在标签,我不希望这样做,因为我将标签显示为段外。

我浏览了文档,找不到解决方案,还看了一些示例。

public static readonly pieChartOptions: ChartOptions = {
responsive: true,
maintainAspectRatio: false,
legend: {
  display: false
},
tooltips: {
  enabled: true
},
layout: {
  padding: {
    left: 0,
    right: 0,
    top: 70,
    bottom: 0
  }
},
plugins: {
  outlabels: {
    display: true,
    borderWidth: 2,
    lineWidth: 2,
    padding: 3,
    textAlign: 'center',
    stretch: 15,
    font: {
      resizable: true,
      minSize: 12,
      maxSize: 18
    },
    valuePrecision: 1,
    percentPrecision: 2
  }
}

};

Actual result

2 个答案:

答案 0 :(得分:0)

@yurzui提到过,我错过了chartjs-plugin-labels的引用,我想删除它。谢谢@yurzui

答案 1 :(得分:0)

您需要关闭示例标签,如下所示:

options: {
  plugins: {
    datalabels: {
      display: false
    }
    outlabels: {
      display: true
    }
  }
}