图表数据不会载入NG2-图表/图表。

Question

我正在尝试用NG2图表创建一个简单的线条图。如果我对我的数据使用硬编码数据，它可以正常工作。我试图使用一个变量，它是一个字符串数组，但是当我使用变量而不是硬编码的数据时，它就是不加载。我需要更多的打字，以便这篇文章将提交。我不知道还能说什么。如果您需要更多的信息，请告诉我。

body.component.ts

import { ActivatedRoute, Router } from '@angular/router';
import { DataService } from 'src/app/data.service';
import { Chart, ChartConfiguration, ChartType } from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';
import { BaseChartDirective } from 'ng2-charts';
import { formatDate } from '@angular/common';

@Component({
  selector: 'app-body',
  templateUrl: './body.component.html',
  styleUrls: ['./body.component.scss'],
})
export class BodyComponent implements OnInit {
  city: any;
  lat: any;
  lon: any;
  weatherData: any;
  uv: any;
  airData: any;
  airQual: any;
  graphData: any = {};
  timeData: any = [];
  tempData: any = [];
  xAxisData: any;
  yAxisData: any;
  adjust: number = 0;
  loaded: boolean = false;

  constructor(private route: ActivatedRoute, public dataSerivce: DataService) {
    Chart.register(ChartDataLabels);
  }

  ngOnInit(): void {
    console.log(this.loaded, "FIRST")
    console.log(this.tempData, "FIRST")
    this.city = this.route.snapshot.paramMap.get('city');
    this.lat = this.route.snapshot.paramMap.get('lat');
    this.lon = this.route.snapshot.paramMap.get('lon');
    this.dataSerivce.getData2(this.lat, this.lon).subscribe((data) => {
      if (data) {
        this.weatherData = data;
      }
      if (this.weatherData.daily[0].uvi < 3) {
        this.uv = 'Low';
      } else if (this.weatherData.daily[0].uvi < 6) {
        this.uv = 'Moderate';
      } else if (this.weatherData.daily[0].uvi < 8) {
        this.uv = 'High';
      } else if (this.weatherData.daily[0].uvi > 7) {
        this.uv = 'Very High';
      }
    });
    this.dataSerivce.getAir(this.lat, this.lon).subscribe((data) => {
      if (data) {
        this.airData = data;
      }
      if (this.airData.list[0].main.aqi === 1) {
        this.airQual = 'Good';
      } else if (this.airData.list[0].main.aqi === 2) {
        this.airQual = 'Fair';
      } else if (this.airData.list[0].main.aqi === 3) {
        this.airQual = 'Moderate';
      } else if (this.airData.list[0].main.aqi === 4) {
        this.airQual = 'Poor';
      } else if (this.airData.list[0].main.aqi === 5) {
        this.airQual = 'Very Poor';
      }
    });
    this.dataSerivce.getHourData(this.lat, this.lon).subscribe((data) => {
      if (data) {
        this.graphData = data;
      }
      if (this.graphData.timezone_offset === -14400) {
        this.adjust = -3600;
      } else if (this.graphData.timezone_offset === -25200) {
        this.adjust = 7200;
      } else if (this.graphData.timezone_offset === -21600) {
        this.adjust = 3600;
      } else {
        this.adjust = 0;
      }
      this.tempData = this.graphData.hourly
        .slice(0, 8)
        .map((graph: any) => graph.temp.toFixed());
      this.timeData = this.graphData.hourly
        .slice(0, 8)
        .map((graph: any) =>
          formatDate(graph.dt * 1000, 'h a', 'en-US').toString()
        );
      this.loaded = true;
      console.log(this.loaded, "SECOND")
      console.log(this.tempData, "SECOND")
    });
  }
  public lineChartData: ChartConfiguration['data'] = {
    datasets: [
      {
        label: 'Temp',
        data: this.tempData,
        fill: true,
        borderColor: '#f1612b',
        backgroundColor: '#f1642b2e',
        borderWidth: 2,
        pointRadius: 0,
        tension: 0.25,
        datalabels: {
          labels: {
            value: {
              color: 'black',
            },
          },
          align: 'end',
          offset: -0.5,
        },
      },
    ],
    labels: this.timeData
  };

  public lineChartOptions: ChartConfiguration['options'] = {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      x: {
        grid: {
          display: false,
          drawBorder: false,
        },
      },
      y: {
        grid: {
          display: false,
          drawBorder: false,
        },
        ticks: {
          stepSize: 1,
          display: false,
        },
        grace: 3,
      },
    },
    plugins: {
      legend: {
        display: false,
      },
    },
  };

  public lineChartType: ChartType = 'line';
}

body.component.html

<div *ngIf="loaded == true" style="display: block">
            <canvas
              baseChart
              width="490"
              height="175"
              [data]="lineChartData"
              [options]="lineChartOptions"
              [type]="lineChartType"
            ></canvas>

Answer 1

1. 打开您的DevTools并检查您的控制台中是否有错误。
2. 执行console.log(this.tempData)和console.log(this.timeData)操作，并检查这些变量是否具有与工作的“静态”数据相同的数据格式。

Answer 2

您的问题是，图表没有注意到数组中的数据已经更改。您可以重新初始化数据，然后图表将自动刷新。

this.tempData = {...this.tempData}

如果仍然存在问题，最好提供console.log语句的数据。