Javascript 如何在angular2中实现zingchart

我有一个现有的项目，我想实施zingcharts的

我尝试了3个不同的教程，主要来自“”博客

然而，我不能让它在我的项目中工作。 所以我决定先用最基本的方法来实现它，然后再尝试更好的方法。这就是我所做的，但还没有成功

作为安格拉尔的新手，我不太确定这是否有效

我访问了ZingChart网站并尝试实现这个基本示例->

因此，我构建了两个文件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>

//chart.ts
从'@angular/core'导入{Component}；
@组成部分({
选择器：“rt图表”，
templateUrl:“./chart.component.html”
})
导出类图表
{
}
//chart.component.html
var图表数据={
键入：“bar”，//在此处指定图表类型。
标题：{
文本：“我的第一张图表”//为图表添加标题
},
图例：{}，//创建一个交互式图例
序列：[//在此处插入序列数据。
{值：[35,42,67,89]}，
{值：[28,40,39,36]}
]
};
render（{//render方法[3]
id:“chartDiv”，
数据：图表数据，
身高：400，
宽度：600
});

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

它没有出现。我做错了什么？有什么我不知道的吗。 Angular2对我来说是很新的

---

感谢使用最新的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');
  }
}

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;
  }
}

其中

ZingChartModel

只是图表的一个模型：

zing chart.model.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');
  }
}

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;
  }
}

---

这里已经完成了

谢谢分配给Yurzui。我会查看并让您知道！