时间戳

首页 > 解决方案 > PrimeNg 条形图如何隐藏条形标签？

angular - PrimeNg 条形图如何隐藏条形标签？

问题描述

我要求不显示条形的标签并将条形挤压在一起，它们之间可能有 3 个像素？

我试过只使用空白标签，但没有奏效。

在此处输入图像描述

标签： angularchart.jsprimeng

解决方案

据我所知，您想隐藏 xAixs 和 yAxis 的标签，并且还想更改条形线的宽度。要完成所有这些，请使用以下代码：

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

在组件中初始化图表的选项：

    this.option1= {
       title: {
            display: true,
            text: '% Utilization',
            position: 'left'
          },
      scales: {
          yAxes: [{
                        display: true,
                        scaleLabel: {
                            show: true,
                            labelString: 'Value'
            },
            ticks: {
              beginAtZero:true,
              max: 100,
              min: 0,
            }
                    }],
          xAxes: [{
            categoryPercentage:1,
            barPercentage:1,
            ticks: {
                display:false,
                beginAtZero:0
            }
        }]
      }
  }

要更改条形宽度，请使用 barThickness:4 并隐藏标签使用 ticks 属性。有关更多详细信息，请查看Chartjs 文档

推荐阅读