如何为 ng2-charts 条形图设置静态标签？

Question

我正在使用 ng2-charts。我有一组数据。我在 x 轴上打印日值，在 y 轴上打印标记。问题是，如果我只有周二和周三的数据，那么它只显示两个，但我想要静态 x 轴（周日-周六）。如下图

我目前拥有的：

我想得到的：

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 },
 ]
})

Answer 1

要实现解决方案，请像下面这样更新您的代码。

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'},
  ]
}

这里Working example

如何为 ng2-charts 条形图设置静态标签？

How to set static labels for ng2-charts bar charts?

typescript

chart.js

ng2-charts

angular