typescript - Typescript and HighChart refresh

Question

I have an angular component with the following HTML

    <app-piechart [data]="pieChart" 
                    chartName = 'Browsers'
                    title='Browser market shares. January, 2018'
                    subtitle='Click the slices to view versions. Source: <a href="http://statcounter.com" target="_blank">statcounter.com</a>'>
     </app-piechart>        

With the following Typescript behind the html

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

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})

export class DashboardComponent implements OnInit {
  pieChart = [];  
  constructor(private testService: TestService) { }
  ngOnInit(): void {    
    this.testService.getData().subscribe(retLifeSuccess => {      
    this.pieChart = retLifeSuccess;},         
    errorLifeCycle => { });
    }
}

This issue I'm have is the html get rendered before the data is loaded. How can I force the chart to re-render? Quick note, is a component that sets the information for the high chart pie chart

标签： typescript

Answer 1

好的，对于关注此线程的任何人，我都能让刷新工作。

这是代码：

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

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})

export class DashboardComponent implements OnInit {
  pieChart = [];  

  refresh: bool = false;

  constructor(private testService: TestService) { }
  ngOnInit(): void {    
    this.testService.getData().subscribe(retLifeSuccess => {      
    this.pieChart = retLifeSuccess;
    refresh = true;
    },         
    errorLifeCycle => { });
    }
}

现在在标签中：

<app-piechart [data]="pieChart" 
                    chartName = 'Browsers'
                    refresh='refresh'
                    title='Browser market shares. January, 2018'
                    subtitle='Click the slices to view versions. Source: <a href="http://statcounter.com" target="_blank">statcounter.com</a>'>

     </app-piechart>  

在饼图组件中：注意我创建了一个属性，当更改它会强制刷新。超级简单，但需要一些思考。

export class PiechartComponent implements OnInit {

  ChartOptions: {};
  Highcharts = Highcharts;

  @Input() data = [];
  @Input() title = "";
  @Input() subtitle = "";
  @Input() chartName = "";
  @Input() refreshChart = false;



  constructor() { }

  ngOnInit(): void {
    this.setChart();   
  }


  ngOnChanges(changes: SimpleChanges): void {
    //Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.
    //Add '${implements OnChanges}' to the class.
    this.setChart();
    

  }


  setChart() {
    this.ChartOptions = {
      chart: {
        type: 'pie'
      },
      title: {
        text: this.title
      },
      subtitle: {
        text: this.subtitle
      },

      accessibility: {
        announceNewData: {
          enabled: true
        },
        point: {
          valueSuffix: '%'
        }
      },

      plotOptions: {
        series: {
          dataLabels: {
            enabled: true,
            format: '{point.name}: {point.y:.1f}%'
          }
        }
      },

      tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
      },

      series: [
        {
          name: this.chartName,
          colorByPoint: true,
          data: this.data
        }
      ],
      drilldown: {}
    };

    HC_exporting(Highcharts);

    // This does seomething with resizing
    setTimeout(() => {
      window.dispatchEvent(
        new Event('resize')
      );
    }, 300);
  }

}