我如何将Zingchart实现到Angular2中

Question

我有一个我想实现zingcharts的现有项目。

我尝试了3个不同的教程，主要来自" https://blog.zingchart.com/2016/07/19/zingchart-and-angular-angular-2-charts-2-charts-back-back-at-it-ip-again/"博客。<<<<<<<<<<<<<<<<<<<<<<<<<<<<<</p>

但是，我无法在项目中工作。因此，我决定首先尝试以最基本的方式实施它，然后以更高的方式尝试。这是我所做的，但还没有购物。

是Angular2的新手，我不确定这是否会起作用。

我去了Zingchart网站，试图实现此基本示例 -> https：//www.zingchart.com/docs/getting-started/your-first-chart/

所以我构建了2个文件Chart.ts和Chart.component.html并实现了

"<script src="https://cdn.zingchart.com/zingchart.min.js"></script>"

在index.html

中

//chart.ts
import { Component } from '@angular/core';
@Component({
    selector: 'rt-chart',
    templateUrl: './chart.component.html'
})
export class Chart
{
}
//chart.component.html
<!--Chart Placement[2]-->
  <div id="chartDiv"></div>
  <script>
    var chartData = {
      type: "bar",  // Specify your chart type here.
      title: {
        text: "My First Chart" // Adds a title to your chart
      },
      legend: {}, // Creates an interactive legend
      series: [  // Insert your series data here.
          { values: [35, 42, 67, 89]},
          { values: [28, 40, 39, 36]}
  ]
};
zingchart.render({ // Render Method[3]
  id: "chartDiv",
  data: chartData,
  height: 400,
  width: 600
});
  </script>

我在我已经工作的网站上称其为

它没有显示。我究竟做错了什么？我缺少什么吗？angular2对我来说是很新的。

谢谢

Answer 1

使用最新的angular2版本（@2.2.3），您可以利用特殊的Zingchart指令这样的指令：

zing-chart.directive.ts

declare var zingchart: any;
@Directive({
  selector : 'zing-chart'
})
export class ZingChartDirective implements AfterViewInit, OnDestroy {
  @Input()
  chart : ZingChartModel;
  @HostBinding('id') 
  get something() { 
    return this.chart.id; 
  }
  constructor(private zone: NgZone) {}
  ngAfterViewInit() {
    this.zone.runOutsideAngular(() => {
      zingchart.render({
        id : this.chart.id,
        data : this.chart.data,
        width : this.chart.width,
        height: this.chart.height
      });
    });
  }
  ngOnDestroy() {
    zingchart.exec(this.chart.id, 'destroy');
  }
}

其中 ZingChartModel只是图表的模型：

zing-chart.model.ts

export class ZingChartModel { 
  id: String;
  data: Object;
  height: any;
  width: any;
  constructor(config: Object) {
    this.id = config['id'];
    this.data = config['data'];
    this.height = config['height'] || 300;
    this.width = config['width'] || 600;
  }
}

以下完成 plunker示例