Отображение диапазона дат по оси Y и 2 графика

Я использую диаграммы ng2 для отображения данных в виде графика. Я могу настроить метки оси X. но я хочу отображать даты на оси Y. когда я передаю даты в качестве входных данных, они отображают значения по оси Y в отрицательной форме и график не будет работать. даты будут примерно с 1 января по 5 января, 6 января, 10 января и т. д., спасибо заранее

public lineChartData: Array<any> = [
    { data: ['1 Jan to 5 Jan', '6 Jan to 10 Jan', '11 Jan to 15 Jan', '16 Jan to 20 Jan', '21 Jan to 25 Jan', '26 Jan to 30 Jan', '31 Jan to 4 Feb'], label: 'Series A'}
  ];
  public lineChartLabels: Array<any> = ['Module 1', 'Module 2', 'Module 3', 'Module 4', 'Module 5', 'Module 6', 'Module 7'];
  public lineChartOptions: any = {
    responsive: true
  };
  public lineChartColors: Array<any> = [
    { // grey
      backgroundColor: 'rgba(148,159,177,0.2)',
      borderColor: 'rgba(148,159,177,1)',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    },
    { // dark grey
      backgroundColor: 'rgba(77,83,96,0.2)',
      borderColor: 'rgba(77,83,96,1)',
      pointBackgroundColor: 'rgba(77,83,96,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(77,83,96,1)'
    },
    { // grey
      backgroundColor: 'rgba(148,159,177,0.2)',
      borderColor: 'rgba(148,159,177,1)',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    }
  ];
  public lineChartLegend: boolean = true;
  public lineChartType: string = 'line';

  // events
  public chartClicked(e: any): void {
    console.log(e);
  }

  public chartHovered(e: any): void {
    console.log(e);
  }
<div class="col-md-12" style="display: block;">
            <canvas baseChart [datasets]="lineChartData" [labels]="lineChartLabels" [options]="lineChartOptions" [colors]="lineChartColors" [legend]="false" [chartType]="lineChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
        </div>

0 ответов

Другие вопросы по тегам