ChartJS 在PrimeNG中隐藏图例

9o685dep 于 2023-01-17 发布在 Chart.js

关注(0)|答案(3)|浏览(209)

所以我想把图例隐藏在我的图中，因为52个标签占用了太多的空间，但是我找不到在primeNG中这样做的方法。

我的密码：

chart.component.html

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

我的组件中的声明.ts

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

所以所有的数据都很好，只是标签应该隐藏起来。提前感谢

chart.js

来源：https://stackoverflow.com/questions/46933901/hiding-legend-in-primeng

3条答案

按热度按时间

7fyelxc51#

你需要像这样把选项绑定到一个对象：

<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/

赞(0）回复(0）举报 2023-01-17

yzuktlbb2#

你可以这样做。
超文本：

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

在TS文件中：

options = {
  legend: {display: false}  
}

赞(0）回复(0）举报 2023-01-17

mtb9vblg3#

options: {
   plugins: {
     legend: {display: false},
   }
}

这就是解决办法。

赞(0）回复(0）举报 2023-01-17

我来回答

ChartJS 在PrimeNG中隐藏图例

3条答案

相关问题

热门标签

最新问答