Question

当我使用window.onload时，我收到此警告，但是当我不使用它时，此警告不会发生，但我的图表不会出现在屏幕上。我正在尝试使用chart.js，它只在我使用window.onload时出现我正在寻找一种方法，我可以在窗口加载后执行此代码。

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { WeatherService } from '../weather.service'; 
import { Chart } from 'chart.js';
 @Component({
 selector: 'app-graph-panel-2',
templateUrl: './graph-panel-2.component.html',
styleUrls: ['./graph-panel-2.component.css']
 })
export class GraphPanel2Component implements OnInit {
         chart=[];

 constructor(private _weather: WeatherService) { }

 ngOnInit() {

  var res = {"message":"","cod":"200","city_id":2643743,"calctime":0.0875,"cnt":3,"list":[{"main":{"temp":279.946,"temp_min":279.946,"temp_max":279.946,"pressure":1016.76,"sea_level":1024.45,"grnd_level":1016.76,"humidity":100},"wind":{"speed":4.59,"deg":163.001},"clouds":{"all":92},"weather":[{"id":500,"main":"Rain","description":"light rain","icon":"10n"}],"rain":{"3h":2.69},"dt":1485717216},{"main":{"temp":282.597,"temp_min":282.597,"temp_max":282.597,"pressure":1012.12,"sea_level":1019.71,"grnd_level":1012.12,"humidity":98},"wind":{"speed":4.04,"deg":226},"clouds":{"all":92},"weather":[{"id":500,"main":"Rain","description":"light rain","icon":"10n"}],"rain":{"3h":0.405},"dt":1485745061},{"main":{"temp":279.38,"pressure":1011,"humidity":93,"temp_min":278.15,"temp_max":280.15},"wind":{"speed":2.6,"deg":30},"clouds":{"all":90},"weather":[{"id":701,"main":"Mist","description":"mist","icon":"50d"},{"id":741,"main":"Fog","description":"fog","icon":"50d"}],"dt":1485768552}]};
  /*
this._weather.dailyForecast()
  .subscribe(res => {
    console.log(res)
  })
  */
    let temp_max = res['list'].map(res => res.main.temp_max);
    let temp_min = res['list'].map(res => res.main.temp_min);
    let alldates = res['list'].map(res => res.dt)

    let weatherDates = []
    alldates.forEach((res) => {
        let jsdate = new Date(res * 1000)
        weatherDates.push(jsdate.toLocaleTimeString('en', { year: 'numeric', month: 'short', day: 'numeric' }))
    })


    window.onload = function(){
    var canvas = document.getElementById("canvas");
    this.chart = new Chart(canvas, {
      type: 'bar',
      data: {
        labels: weatherDates,
        datasets: [
          { 
            label: "Max",
            data: temp_max,
            borderColor: "#3cba9f",
            backgroundColor: "#3cba9f",
            fill: true
          },
          { 
            label: "Min",
            data: temp_min,
            borderColor: "#ffcc00",
            backgroundColor: "#e54e89",
            fill: true
          },
        ]
      },
      options: {
        legend: {
          display: true
        },
        scales: {
          xAxes: [{
            display: false
          }],
          yAxes: [{
            display: false
          }],
        }
      }
    });
    }

}

Answer 1

如果您尝试关注this教程：

我找到了一些不适合我的事情。

为了让运行正常，我改变了代码如下：

    import { Component, ElementRef, OnInit } from '@angular/core';
import { WeatherService } from './weather.service';
import { Chart } from 'chart.js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  chart = [];

  constructor(private _weather: WeatherService, private element: ElementRef) { }

  ngOnInit() {

    let ctx = this.element.nativeElement.querySelector('#canvas').getContext('2d');
    let chart = new Chart(ctx, {
      // The type of chart we want to create
      type: 'line',

      // The data for our dataset
      data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
          label: "My First dataset",
          backgroundColor: 'rgb(255, 99, 132)',
          borderColor: 'rgb(255, 99, 132)',
          data: [0, 10, 5, 2, 20, 30, 45],
        }]
      },

      // Configuration options go here
      options: {}
    });

  }
}

希望有所帮助

我得到TS2339：'Window'类型中不存在属性'图表'？

1 个答案: