angular - Hur man ställer in statiska etiketter för ng2-charts stapeldiagram?
Jag använder ng2-charts. Jag har en array med data. Jag skriver ut dagvärden på x-axeln och poäng på y-axeln. Problemet är att om jag bara har data för tisdag och onsdag så visas bara två, men jag vill ha en statisk x-axel (sön-lör). Som visas nedan
Vad jag har just nu:
Vad jag vill få:
HTML
<div style="display: block" *ngIf="barChartData">
<canvas baseChart width="400" height="180" style="margin-left:5%;margin-
top: 5%;" [datasets]="barChartData"
[labels]="barChartLabels" [options]="barChartOptions"
[legend]="barChartLegend" [chartType]="barChartType"
(chartHover)="chartHovered($event)" [colors]="chartColors"
(chartClick)="chartClicked($event)"></canvas>
</div>
TS
this.barChartLabels = this.days; //Have week days like[tue,wed]
setTimeout(() => {
this.barChartData = [
{ data: this.marks },
]
})
Svar #1
För att uppnå lösningen, vänligen uppdatera din kod som nedan.
HTML
<div>
<div style="display: block">
<canvas baseChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
<button (click)="randomize()">Update</button>
</div>
TS
export class AppComponent {
public barChartOptions:any = {
scaleShowVerticalLines: false,
responsive: true
};
public barChartLabels:string[] = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
public barChartType:string = 'bar';
public barChartLegend:boolean = true;
public barChartData:any[] = [
{data: [0, 0, 80, 81, 0, 0, 0], label: 'Graph 1'},
]
}
Här är ett fungerande exempel

