PrimeNg 条形图如何显示 y 轴的标签答案

【问题标题】：PrimeNg bar chart how to show a label for the y-axisPrimeNg 条形图如何显示 y 轴的标签
【发布时间】：2021-04-09 15:11:07
【问题描述】：

我需要将垂直字符串显示为条形图的 yAxis。

我还需要将条形挤压在一起并为条形设置特定宽度。

我添加了我的模型的屏幕截图。

对此有何想法或提示？

【问题讨论】：

标签： angular chart.js primeng

【解决方案1】：

由于 primeNg 只实现了 Chart.JS 库，您可以使用普通的 chartjs 选项，例如为 Y 轴的每一步添加百分比符号，您可以这样做：

chartOptions = {
    scales: {
      yAxes: [
        {
          ticks: {
            callback: (label, index, labels) => {
              return label + '%';
            }
          }
        }
      ]
    }
  }

然后将该类变量作为选项传递给primeng图表组件，如下所示：<p-chart type="bar" [options]="chartOptions" [data]="data"></p-chart>。

因此，您想添加任何其他内容，您可以阅读 chartjs 文档/chartjs 相关问题，因为它们将适用于primeng。

【讨论】：

【解决方案2】：

试试这个设置Y轴标签

basicOptions: any = {
scales: {
  yAxes: [
    {
      scaleLabel: {
        display: true,
        labelString: '% Cases/Status',
        fontColor: '#757575',
        fontSize: 12
      }
    }
  ]
}

}

【讨论】：

【解决方案3】：

你可以试试：

@Component({
  selector: 'chart-doughnut',
  template: `<p-chart type="bar" [data]="data" [options]="chartOptions"></p-chart> `
})
export class DoughnutChartComponent implements OnInit {

  data: any;
    public chartOptions = {
  scales: {
    yAxes: [{
      ticks: {
        stepSize: 10,
        beginAtZero: true
      }
    }]
  }
}
    constructor() {
        this.data = {
            labels: ['January', 'February', 'March'],
            datasets: [
                {  
         "label":"% Cases/Status",
         "data":[  
            20, 30, 50
         ],
         "fill":false,
         "backgroundColor":[  
            "#FF0000",
            "#FFFF02",
            "#008000",
         ],
         "borderWidth":1
      }
         ],
        }
    }

  ngOnInit() {
  }

}

查看DEMO

【讨论】：