时间戳

首页 > 解决方案 > ng-2 图表无响应

angular - ng-2 图表无响应

问题描述

我正在使用 ng2 图表。我有一个日期选项卡，我可以在其中选择今天、星期、月份和特定日期。据此，我的数据在图表中有所不同。根据日期，我的数据运行良好。但是我的图表响应速度不够快，无法绘制与日期对应的值。

今日查看：https : //ibb.co/bHDdwLG 数据[100,105,120]，

周视图：https : //ibb.co/SfWxyMr 数据[100,105,120,140]

如果您查看周视图，则在完成 value: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>

标签： angulartypescriptchartsng2-charts

解决方案

您需要将维护AspectRatio 设置为 false

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

并设置画布高度 => 画布 baseChart height="450"

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

您可以使用 CSS 设置移动高度

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

推荐阅读