PrimeNg гистограмма, как показать метку для оси Y

Question

У меня есть требование показывать вертикальную строку в качестве оси Y для моей гистограммы.

Мне также нужно сжать брусьями вместе и установить определенную ширину для баров.

Я добавил снимок экрана с моими макетами.

Есть какие-нибудь мысли или намеки на это?

Answer 1

вы можете попробовать что-то вроде:

@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() {
  }

}

чек ДЕМО

Answer 2

Поскольку 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, так как они будут применяться к первому.