ang2にzingchartを実装する方法

Question

私はzingchartを実装したい既存のプロジェクトを持っています。

私は、主に "https://blog.zingchart.com/2016/07/19/zingchart-and-angular-2-charts-back-at-it-again/"ブログから3つのチュートリアルを試しました。

しかし、私は私のプロジェクトでそれを働かせることはできません。 だから私は最初に試して、それを最も基本的な方法で実装し、その後はより良い方法で試してみることにしました。これは私がやったことですが、まだ買い物していません。

これが新しいかどうかはわかりません。

私は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は私には全く新しいものです。

熱意-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：あなたはこのような特殊なZingChartディレクティブを活用することができます（2.2.3 @）最新angular2バージョンで

おかげ

Answer 1

あなたのチャートの単なるモデルです：

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