如何将缩放图表与角度2集成

Question

这是否有可能将Zoom chart与angular 2集成在一起基本的思想是有人做过此事，没有在Internet上找到与此相关的任何线索，这就是为什么我在这里问的任何线索？

Answer 1

1. Description based on angular-seed application

For Angular2 - here are step by step instructions on how to get ZoomCharts running within the angular-seed application. Note that they only describe the steps to get a sample running within the seed application, not the steps required to build fully functional component.

1. Copy zoomcharts.d.ts file into /tools/manual_typings/project/ folder.

2. Modify the zoomcharts.d.ts file to support CommonJS/SystemJS module system by adding at the top of it these lines:

declare module "ZoomCharts" { export = ZoomCharts; }

3. In the tools\\project.config.ts file add this line into the constructor (of course, using CDN is optional) to register the library with SystemJS loader:

this.addPackagesBundles([{ name: "ZoomCharts", path: "https://cdn.zoomcharts-cloud.com/1/latest/zoomcharts.js" }]);

4. Create a new component for the chart, for example, /src/client/app/home/zc-pie-chart.component.ts

``` ///

import { Component, OnInit, ViewChild, AfterViewInit, ElementRef } from '@angular/core'; import { PieChart } from "ZoomCharts";

@Component({ moduleId: module.id, selector: "zc-pie-chart", template: "PieChart is being initialized..." }) export class ZcPieChart implements AfterViewInit {

 @ViewChild("container") private container: ElementRef; ngAfterViewInit() { var x = new PieChart({ container: this.container.nativeElement, assetsUrlBase: System.paths["ZoomCharts"] + "/../assets/", data: [{ url: "https://zoomcharts.com/dvsl/data/pie-chart/browsers.json", }] }); } } ``` 

5. Register the component in the module (in this sample case, home.module.ts ):

``` import { ZcPieChart } from './zc-pie-chart.component';

.. declarations: [..other components.., ZcPieChart], .. ```

6. Add it to the view, for example, home.component.html :

<zc-pie-chart></zc-pie-chart>

2. Integration with Webpack

Note: I tested this with Webpack 2.2.1.

With Webpack you can use simple import ZoomCharts from './zoomcharts/zoomcharts.js'; and it works fine - including bundling of the zoomcharts.js code.

Though in such case ZoomCharts will now load dependencies such as moment.js by itself even if they are already included in the webpack bundle. To enable loading moment.js from the bundle, I used this webpack.config.js file (and using the imports-loader plugin):

```js var path = require('path');

module.exports = { entry: './index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname) }, resolve: { alias: { "moment": path.resolve(__dirname, "zoomcharts", "assets", "moment.js"), "moment-timezone": path.resolve(__dirname, "zoomcharts", "assets", "moment-tz.js"), "zoomcharts": path.resolve(__dirname, "zoomcharts", "zoomcharts.js"), } }, module: { rules: [ { test: path.resolve(__dirname, "zoomcharts", "zoomcharts.js"), loader: { loader: "imports-loader", options: { "moment": "moment", "momentTimezone": "moment-timezone", // workaround that sets window.moment as required by zoomcharts.js "_": ">window.moment=moment;" } } } ], } }; ```

Answer 2

first install zoomchart dependency

npm install --save @dvsl/zoomcharts

Html

<script src="https://cdn.zoomcharts-cloud.com/1/latest/zoomcharts.js"></script>
<div id='demo' style='width:100%; height:300px;'></div>

in ts file create a method

import * as zc from '@dvsl/zoomcharts';
import { WindowRef } from './../../WindowRef';
import { Component, OnInit} from '@angular/core';

export class ZoomChartImplementation implements OnInit{

private zc: any = zc;

constructor(private winRef: WindowRef){
winRef.nativeWindow.ZoomChartsLicense = 'INSERT YOUR ZOOM CHART LICENSE HERE';
winRef.nativeWindow.ZoomChartsLicenseKey ='INSERT YOUR ZOOM CHART LICENSE KEY HERE';
}

loadZoomChart(){
const PieChart = this.zc.PieChart;
const t = new PieChart({
  container: document.getElementById('demo'),
  area: { height: 350 },
  data: {
    preloaded: {
      subvalues: [
        {
          id: 'foo', value: 100, subvalues: [
            { id: 'foo-1', value: 50, style: { expandable: false } },
            { id: 'foo-2', value: 50, style: { expandable: false } }
          ]
        },
        { id: 'bar', value: 50, style: { expandable: false } },
        { id: 'baz', value: 30, style: { expandable: false } }
      ]
    }
  }
});

}

}

you can use any chart instead of pie-chart in my example
this.zc.ANY_CHART