javascript - 如何将 Zoom Chart 与 Angular 2 集成

Question

是否可以将缩放图表与 Angular 2need 集成，基本想法是有人以前做过此操作，但在互联网上没有找到任何与此相关的线程，这就是我在这里问的原因，有任何线索吗？

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;" } } } ], } }; ```