angular2에 zingchart을 구현하는 방법

Question

zingcharts를 구현하려는 기존 프로젝트가 있습니다.

나는 주로 "https://blog.zingchart.com/2016/07/19/zingchart-and-angular-2-charts-back-at-it-again/"블로그에서 3 가지 다른 튜토리얼을 시도했다.

그러나 나는 내 프로젝트에서 그 일을 할 수 없습니다. 그래서 나는 가장 기본적인 방법을 처음부터 시도하고 더 나은 방법을 시도하기로 결정했습니다. 이것은 내가 한 짓이지만 아직 쇼핑하지 않습니다.

angular2에 익숙하지 않습니다. 제대로 작동하는지 확실하지 않습니다.

은 내가 ZingChart 웹 사이트에 가서 기본적인 예를 구현하기 위해 노력 -

>https://www.zingchart.com/docs/getting-started/your-first-chart/ 그래서 나는이 파일 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는 나에게 새롭다.

덕분에이 같은 특별한 ZingChart 지시어를 활용할 수 있습니다 (2.2.3 @)

최신 angular2 버전으로

Answer 1

:

활기-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 Example