Angular ng-2图表没有响应

我使用的是ng2图表。我有一个日期标签，可以选择今天、星期、月份和特定日期。根据这一点，我的数据在图表中有所不同。根据日期，我的数据运行良好。但我的图表响应不够灵敏，无法绘制与日期对应的值

今日视图：数据[100105120]

周视图：数据[100105120140]

若你们看到一周的视图，在完成值之前：140图减少，它似乎并没有响应

代码

TS

public lineChartOptions: any = {
responsive: true,
};

getabc(start?: moment.Moment, end?: moment.Moment) {
this.abcService.getabc(this.token, start, end).subscribe(
  data => {
    this.a = data.map(k => k.a);
    this.date_time = data.map(k => k.datetime.toLocaleTimeString());
    this.lineChartData = [
      { data: this.a, label: 'abc' }
  ]
  this.lineChartLabels=this.date_time
    console.log(this.a);
    console.log(this.date_time); // I can get the values correctly 
   according to the date
  }
);
}

HTML

<div style="display: block;" *ngIf="lineChartData.length > 0">
<canvas baseChart width="400" height="180" style="margin- 
left:5%;margin-top: 5%;" [datasets]="lineChartData"
[labels]="lineChartLabels" [options]="lineChartOptions" 
[colors]="lineChartColors" [legend]="lineChartLegend"
[chartType]="lineChartType" (chartHover)="chartHovered($event)" 
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>

---

不要为canvas元素提供宽度和高度，因为这会限制图形的完整显示，您应该使用图表包装器，并为其指定宽度，canvas将根据可用空间的大小选择大小

<div class="chart-wrapper">
<canvas baseChart [datasets]="lineChartData"  *ngIf="lineChartData.length > 0"
[labels]="lineChartLabels" [options]="lineChartOptions" 
[colors]="lineChartColors" [legend]="lineChartLegend"
[chartType]="lineChartType" (chartHover)="chartHovered($event)" 
(chartClick)="chartClicked($event)"></canvas>
</div>

---

不要为canvas元素提供宽度和高度，因为这会限制图形的完整显示，您应该使用图表包装器，并为其指定宽度，canvas将根据可用空间选择大小

<div class="chart-wrapper">
<canvas baseChart [datasets]="lineChartData"  *ngIf="lineChartData.length > 0"
[labels]="lineChartLabels" [options]="lineChartOptions" 
[colors]="lineChartColors" [legend]="lineChartLegend"
[chartType]="lineChartType" (chartHover)="chartHovered($event)" 
(chartClick)="chartClicked($event)"></canvas>
</div>

下面是解决方案（类必须称为

chart

）

下面是解决方案（类必须称为

chart

）

---

您需要将MaintaintAspectRatio设置为false

 public pieChartOptions: ChartOptions = {
        responsive: true,
        maintainAspectRatio: false,
 }

并设置画布高度=>canvas baseChart height=“450”

---

您需要将MaintaintAspectRatio设置为false

 public pieChartOptions: ChartOptions = {
        responsive: true,
        maintainAspectRatio: false,
 }

并设置画布高度=>canvas baseChart height=“450”

---

还是一样的兄弟还是一样的兄弟

 public pieChartOptions: ChartOptions = {
        responsive: true,
        maintainAspectRatio: false,
 }

  <canvas baseChart height="450"
    [data]="pieChartData"
    [labels]="pieChartLabels"
    [chartType]="pieChartType"
    [options]="pieChartOptions"
    [plugins]="pieChartPlugins"
    [colors]="pieChartColors"
    [legend]="pieChartLegend"
    (chartClick)="chartClicked($event)">
   </canvas>

@media (max-width: 600px) {
  .chartjs-render-monitor {
    height: 700px !important;
  }
}