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

如何将js代码转换为角度2

1 个答案: