Question

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

今日视图：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>

Answer 1

不要为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>

在CSS样式中，您的包装器类

.chart-wrapper{
    position: relative;
    height: 40vh;
    max-width:100%;
}

Answer 2

这是解决方案（类必须称为chart）

<div class="chart">
      <canvas baseChart
              [datasets]="barChartData"
              [labels]="barChartLabels"
              [options]="chartOptions"
              legend="true"
              chartType="bar">
      </canvas>
    </div>

CSS

.chart {
  position: relative;
  min-height: unset;
}

Answer 3

您需要将maintainAspectRatio设置为false

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

并设置画布高度=> canvas 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;
  }
}

ng-2图表无响应

3 个答案: