Оси времени X на графике. js и простое число - PullRequest
0 голосов
/ 23 марта 2020

Я новичок в графике. js, и я использую его с PrimeNg в моем angular проекте. Мне нужно создать гистограмму со временем по осям X с 00:00 до 23:00 с шагом 1 час (с помощью кнопки я могу изменить на шаг 1/2 часа).
Это мой компонент:

export class CompositionChartComponent implements OnChanges {

  @ViewChild('chart') chart: UIChart;
  @Input() selectedTime: number;
  @Input() maxScale: number;
  @Input() manualScale: boolean;

  data: any;
  options: any;
  automaticScaleYAxes: any = {
    beginAtZero: true,
  }
  manualScaleYAxes: any = {
    beginAtZero: true,
    min: 0,
    max: this.maxScale,
    stepSize: 20,
  }

  constructor() {
    this.data = {
      labels: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00','14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00','21:00', '22:00', '23:00'],

      datasets: [
        {
          label: 'My First dataset',
          backgroundColor: '#42A5F5',
          borderColor: '#1E88E5',
          data: [{ y: 65, x: new Date('2020-03-23T03:30:00').getTime() }, { y: 65, x: new Date('2020-03-23T15:30:00').getTime() }]
        },
        {
          label: 'My Second dataset',
          backgroundColor: '#9CCC65',
          borderColor: '#7CB342',
          data: []

        }
      ]
    }
  }

  ngOnChanges(changes: SimpleChanges) {
    this.setChartOptions(changes.maxScale);
    this.chart.options = this.options;
    this.chart.reinit();
  }

  private setChartOptions(maxScale: SimpleChange) {
    if (maxScale)
      this.manualScaleYAxes.max = parseInt(maxScale.currentValue);
    this.options = {
      scales: {
        yAxes: [{
          ticks: (maxScale && maxScale.currentValue != undefined && maxScale.currentValue != "") ? this.manualScaleYAxes : this.automaticScaleYAxes,
          stacked: true,
        }],
        xAxes: [{
          ticks:{
            beginAtZero: true
          },
          stacked: true,
          type: 'time',
          distribution: 'series',
          time: {
            displayFormats: {
              'minute': 'HH:mm', 
              'hour': 'HH:mm', 
              min: '00:00',
              max: '23:59'
            },
            format: "HH:mm",
            unit: 'hour',
            unitStepSize: 1,
          },

        }]
      },
    };
  }
}

Это результат: enter image description here

Как вы можете видеть, значение - половина до и половина после времени, мне нужно только после (так между 03:00 и 04:00 для формата 1 ч и до 03:30 для формата 1/2 ч). Вы можете помочь мне? Спасибо

...