Отображение диапазона дат по оси 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>