Гистограмма. js гистограмма со временем по оси X и категорией по оси Y не отображается

Question

Использование самой последней диаграммы. js Я не могу создать гистограмму со временем по X и категорией по оси Y.

<div style="display: block;">
  <canvas baseChart 
    [datasets]="barChartData"
    [options]="barChartOptions"
    [plugins]="barChartPlugins"
    [legend]="barChartLegend"
    [chartType]="barChartType">
  </canvas>
</div>

машинописный текст:

import { Component, OnInit } from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Label } from 'ng2-charts';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public barChartOptions: ChartOptions = {
    responsive: true,
    scales: {
      xAxes: [{
        type: 'time'
      }],
      yAxes: [{
        type: 'category',
        labels: ['Yes', 'No']
      }]
    }
  };

  public barChartType: ChartType = 'line';
  public barChartLegend = false;

  public barChartData: ChartDataSets[] = [
    { data: [
      {x: new Date('2020-02-20'), y: 'Yes'}, 
      {x: new Date('2020-02-22'), y: 'No'},
      {x: new Date('2020-02-23'), y: 'Yes'},
      {x: new Date('2020-02-24'), y: 'No'}
      ] 
    }
  ];

  constructor() { }

  ngOnInit() {
  }
}

Это обеспечивает хорошую линейную диаграмму, но как только я меняю тип на 'bar', ничего не отображается.

Линия идеальна:

Бар пуст:

https://stackblitz.com/edit/ng2-charts-bar-template-aolnys

Answer 1

Вы можете определить свои yAxis значения в виде чисел. В моем коде «Да» = 2 и «Нет» = 1.

data: [2, 1, 2, 1]

Затем используйте yAxist.ticks.callback для возврата значимых тиковых меток

yAxes: [{
  ticks: {
    beginAtZero: true,
    stepSize: 1,
    callback: value => {
      if (value == 0) {
        return '';
      }
      return value == 1 ? 'No' : 'Yes';
    }
  }
}]

Пожалуйста, посмотрите на следующее StackBlitz