如何在primeng条形图中更改y轴标签?

时间:2017-08-10 15:12:32

标签: angular primeng

我想在y轴上显示天数(2,4,6,8,10 ..)的条形图,在x轴上显示org1,org2,org3。默认情况下,y轴上的天数显示为10,20,30。能否让我知道如何改变它。

** component.ts **

 this.chartdata = {
            labels: ['Org1', 'Org2', 'Org3', 'Org4', 'Org5', 'Org6', 'Org7'],
            datasets: [
                {
                    label: '< 7 days',
                     backgroundColor: '#9CCC65',
                    borderColor: '#7CB342',
                    data: [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22]
                },
                {
                    label: '< 14 days',
                    backgroundColor: '#f4eb3d',
                    borderColor: '#f4eb3d',
                    data: [1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21]
                },
                 {
                    label: '> 21 days',
                    backgroundColor: '#ef220b',
                    borderColor: '#ef220b',
                    data: [1, 3, 5, 7, 9,12, 14, 16, 18, 20, 22]
                }

            ]
        }

** HTML Page **

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

**输出**

enter image description here

1 个答案:

答案 0 :(得分:1)

您需要将图表选项指定为

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

然后您可以更改选项中的y轴刻度:

public chartOptions = {
  scales: {
    yAxes: [{
      ticks: {
        stepSize: 2,
        beginAtZero: true
      }
    }]
  }
}