Highcharts不显示数据

Question

我正在尝试显示一个图表，其中包含在角度组件之间传递的数据。打印图表的组件的 ngOnInit() 数据正常，但该图表没有显示任何内容。我使用 jquery 来控制到达的数据是否为空。请帮忙。非常感谢！

hello-component.component.ts

import { Component, OnInit, Input} from '@angular/core';

import * as $ from "jquery";
import * as Highcharts from 'highcharts';

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


  @Input() direct: number;

  constructor () {     
  };

  public options: any = {
    chart: {
      type: 'column',
      height: 700
    },
    title: {
      text: 'Sample Scatter Plot'
    },
    credits: {
      enabled: false
    },
    tooltip: {
      formatter: function() {
        return 'x: ' + Highcharts.dateFormat('%e %b %y %H:%M:%S', this.x) + 'y: ' + this.y.toFixed(2);
      }
    },
    xAxis: {
       categories: ['RG', 'WM']
    },
    series: [
      {
        name: 'Normal',
        
        data: (function () { $(function() { 
          var datos = [];
          for (let i = 0; i <=1; i += 1) {
            datos.push({
              x: i,
              y: this.direct + i
            });
          }
          return datos;
        })}())
        
      }    
    ]
  }  

  ngOnInit(){
    console.log("direct: " + this.direct);
    Highcharts.chart('container', this.options);       
  }
}

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'passComponent';
  aces: number = 5;  
  
  ngOnInit() {
    //this.aces = 5;
    console.log("aces: " + this.aces);
  }
}

hello-component.component.html

<p>{{direct}} direct</p>
<div id="container"></div>

app.component.html

<app-hello-component [direct]="aces"></app-hello-component>

Answer 1

I was told the solution. It's about the way you set the highcharts values with angular:

onClickMe() {

    var indx = [0,1];
    var valor = [];
    indx.forEach(elm => { 
      console.log("elm: " + elm);
      valor[elm] = this.direct + elm;  
    });    
    this.options.series[0]['data'] = valor;

    console.log("direct 2: " + this.direct);
    Highcharts.chart('container', this.options); 


  }

Answer 2

在构造函数中移动选项和 onInit 逻辑。我敢打赌，图表是在 onInit 出现在生命周期之前绘制的。