2の角度にjsコードを変換する方法

Question

どのように私は角度2でこのjs関数を変換できますか？

これは、円グラフの関数である：

$(function() { 

var data = [{ 
    label: "Series 0", 
    data: 1 
}, { 
    label: "Series 1", 
    data: 3 
}, { 
    label: "Series 2", 
    data: 9 
}, { 
    label: "Series 3", 
    data: 20 
}]; 

var plotObj = $.plot($("#flot-pie-chart"), data, { 
    series: { 
     pie: { 
      show: true 
     } 
    }, 
    grid: { 
     hoverable: true 
    }, 
    tooltip: true, 
    tooltipOpts: { 
     content: "%p.0%, %s", // show percentages, rounding to 2 decimal places 
     shifts: { 
      x: 20, 
      y: 0 
     }, 
     defaultTheme: false 
    } 
}); 

そして、どのようにHTMLで表示するには？クラスなどで？たぶんngShow？ このコードはいくつかの円グラフを解決するために使用します。

Answer 1

あなたはこのようangular2ディレクティブを作成することができます

declare var $: any; 

@Directive({ 
    selector: 'pie-flot', 
    host: { 
    '[style.display]': '"block"', 
    '[style.width]': '"300px"', 
    '[style.height]': '"300px"' 
    } 
}) 
export class PieFlotDirective { 
    @Input() data: any; 
    plotObj: any; 

    constructor(private elRef: ElementRef) {} 

    ngAfterViewInit() { 
    this.plotObj = $.plot($(this.elRef.nativeElement), this.data, { 
     series: { 
     pie: { 
      show: true 
     } 
     }, 
     grid: { 
     hoverable: true 
     }, 
     tooltip: true, 
     tooltipOpts: { 
     content: "%p.0%, %s", 
     shifts: { 
      x: 20, 
      y: 0 
     }, 
     defaultTheme: false 
     } 
    }); 
    } 

    ngOnDestroy() { 
    this.plotObj.destroy(); 
    } 
} 

し、それを使用します。対応するplunkrがhere