如何將js代碼轉換爲角度2

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(); 
    } 
} 

，然後使用它：

<pie-flot [data]="data"></pie-flot> 

相應plunkr是here