在 PrimeNG 中隐藏图例

Question

所以我想在我的饼图中隐藏我的图例，因为 52 个标签占用了太多 space 但我无法在 primeNG 中找到实现它的方法。

我的代码：

chart.component.html

    <p-chart type="doughnut" [data]="monthlyTeamCost"></p-chart>

我的 component.ts

中的声明

this.monthlyTeamCost = {
                    labels: team,
                    options: {labels: {display: false}},
                    datasets: [
                        {
                            data: amount,
                            backgroundColor: colorArr,
                        }],
                    };

所以所有数据都很好，只是标签应该被隐藏。提前致谢

Answer 1

您需要像这样将选项绑定到一个对象：

<p-chart type="doughnut" [data]="monthlyTeamCost" [options]="chartOptions"></p-chart>

然后在你的 TS 文件中：

this.chartOptions = {
  legend: {display: false}
}

Prime NG 是 Chart.JS 的绑定（用于库的图表部分），因此您可以在 Chart.JS 网站中找到详尽的选项列表：http://www.chartjs.org/docs/latest/

Answer 2

你可以这样做。

HTML:

<p-chart type="horizontalBar" [data]="data" [options]="options"></p-chart>

在您的 TS 文件中：

options = {
  legend: {display: false}  
}

在 PrimeNG 中隐藏图例

Hiding legend in PrimeNG

angular

chart.js

primeng