首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >绘图工具. Angular2

绘图工具. Angular2
EN

Stack Overflow用户
提问于 2016-07-18 21:32:57
回答 1查看 594关注 0票数 5

我是相对较新的web应用程序,因此才刚刚开始使用Angular2 (没有使用angularJS)和类型记录。我正试着用Zing图表来绘制一个图表。我浏览了5分钟的快速入门以及angular2页面中的教程,并对它的工作原理有了一个很好的了解。我按照Zing图表页面上的说明使用这两个工具(https://blog.zingchart.com/2016/03/16/angular-2-example-zingchart/)在网页上创建了一个图表。然而,我似乎有问题。1)我无法从@ AfterView /core导入。尽管页面上说我必须使用angular 2/core,但我使用@angular/core作为导入模块的源文件夹。英格拉尔2/核心没有得到认可。2)当函数绑定到zing图表对象(例如- zingchart.render()、zingchart.exec())时,会出现一个错误,即无法找到zingchart。我也不知道这里到底出了什么问题。

代码语言:javascript
复制
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
}]
}
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-07-19 17:42:52

坦白说,我是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"

通过不遵守博客帖子的指示,您已经打破了角2的语法,当写这篇文章的时候。导入函数及其名称的角2语法从2.0.0 beta 9(编写函数的版本)和2.0.0 RC0 (我假设使用的最小版本)更改。如果您想使用现有的代码,就必须使用我们编写的import语句和我们使用的Range2版本(2.0.0 beta 9)。

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

2)对于事件绑定,在这里后的另一个堆栈溢出中有一个很好的解释。

票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/38446344

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档