绘图工具 - Angular2答案

【问题标题】：Graphing tools - Angular2绘图工具 - Angular2
【发布时间】：2016-07-18 21:32:57
【问题描述】：

我对 Web 应用程序比较陌生，因此我才刚刚开始使用 Angular2（没有使用过 angularJS）和 Typescript。我正在尝试使用 Zingchart 绘制图表。我浏览了 5 分钟的快速入门以及 angular2 页面中的教程，并对它的工作原理有了一个不错的了解。我按照 Zingchart 页面上的说明使用这两个工具 (https://blog.zingchart.com/2016/03/16/angular-2-example-zingchart/) 在网页上创建了一个图表。但是，我似乎遇到了问题。 1) 我无法从 @angular/core 导入 AfterView。虽然页面说我必须使用 angular2/core，但我使用 @angular/core 作为源文件夹来导入模块。 angular2/core 未被识别。 2) 当有函数绑定到 zingchart 对象时（例如 - zingchart.render()、zingchart.exec()），会出现无法找到 zingchart 的错误。我也不确定这里出了什么问题。

import { Component, NgZone, AfterViewInit, OnDestroy }        from '@angular/core';

class Chart { 
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;
}
}

@Component({
selector : 'zingchart',
inputs : ['chart'], 
template : `
 <div id='{{chart.id}}'></div>
 `
 })
class ZingChart implements AfterViewInit, OnDestroy {
chart : Chart;
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');
}
}

//Root Component
@Component({
selector: 'my-app',
directives: [ZingChart],
template: `
<zingchart *ngFor="#chartObj of charts" [chart]='chartObj'></zingchart>
`,
})
export class App {
charts : Chart[];
constructor() {
this.charts = [{
  id : 'chart-1',
  data : {
    type : 'line',
    series : [{
      values :[2,3,4,5,3,3,2]
    }],
  },
  height : 400,
  width : 600
}]
}
}

【问题讨论】：

请张贴代码来演示您的尝试。
angular2/... 用于测试版 @angular/... 用于 RC.x 版本。

标签： javascript charts angular zingchart

【解决方案1】：

完全披露，我是 ZingChart 团队的成员。

1)"I am not able to import AfterView from @angular/core. Although the page says that I must be using angular2/core I am using @angular/core as the source folder"

由于不遵守blog post 的说明，您在撰写本文时破坏了 Angular 2 的语法。用于导入函数的 Angular 2 语法及其名称从 2.0.0 beta 9（为此编写的版本）和 2.0.0 RC0（我假设您正在使用的最低版本）更改。如果您想使用我们现有的代码，则必须使用我们编写的 import 语句和我们使用的 Angular 2 版本（2.0.0 beta 9）。

我们正在为 Angular 2.0.0 RC4 编写更新的博客文章，其中将包括如何使用您说要导入的新 @angular 符号

2) 对于事件绑定，另一个 stackoverflow 帖子 here 有很好的解释。

【讨论】：