ionic2+highcarts优化升级

针对这篇文章的升级

自定义组件

import {Component,Input,Output,ElementRef,ViewChild} from '@angular/core';
import __Highcharts from 'highcharts'
@Component({
  selector: 'my-hcharts',
  template: `
  <div #chart></div>
  `
})
export class HchartsComponent{

  @ViewChild("chart") public create:ElementRef;
  private userOpts : any ;
  @Input() set charts(opts:any){
    this.userOpts = opts ;
    this.init();
  }
  private _chart : any ;
  
  private init(){
    if(this.userOpts ){
      let opts :any  = this.userOpts ;
      opts.chart.renderTo = this.create.nativeElement;
      this._chart = new __Highcharts.Chart(opts);
    }
  }
  constructor(element:ElementRef){
    this.create = element ;
  }
}

引用

//在app.component.ts中引入
//在需要调用的模版中写标签
<my-hcharts [charts]="month_summary"></my-hcharts>