如何将zingchart实现为angular2 [英] How do I implement zingchart into angular2

问题描述

我有一个要在其上实施zingcharts的现有项目.

I have an existing project that I want to implement zingcharts on.

我尝试了3种不同的教程，这些教程主要来自"

I have tried 3 different tutorials mainly from " https://blog.zingchart.com/2016/07/19/zingchart-and-angular-2-charts-back-at-it-again/ "blog.

但是，我无法在我的项目中使用它. 因此，我决定我将首先尝试并以最基本的方式实施它，然后再尝试更好的方法.这是我所做的，但是还没有购买.

However I can not get that working in my project. So I decided I will try and implement it the most basic way first and later on try better ways. This is what I did but it does not shop up yet.

我是angular2的新手，我不确定这是否行得通.

Being new to angular2 I am not quite sure if this will work.

我去了ZingChart网站并尝试实现此基本示例->

I went to the ZingChart website and tried to implement this basic example ->https://www.zingchart.com/docs/getting-started/your-first-chart/

因此，我构建了2个文件chart.ts和chart.component.html并实现了

So I built 2 files chart.ts and chart.component.html and implemented the

"<script src="https://cdn.zingchart.com/zingchart.min.js"></script>"

在index.html

in the 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>

我在已经正常运行的网站中将其称为

I called it in my already working website as

它不显示.我究竟做错了什么?有什么我想念的吗? Angular2对我来说还很新.

It does not show up. What am I doing wrong? Is there something I am missing. Angular2 is quite new to me.

谢谢

推荐答案

使用最新的angular2版本(@ 2.2.3)，您可以像下面这样利用特殊的ZingChart指令:

With latest angular2 version (@2.2.3) you can leverage special ZingChart directive like this:

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

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

这里已完成 柱塞示例

Here's completed Plunker Example

这篇关于如何将zingchart实现为angular2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！