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

Question

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

Answer 1

1.基于angular-seed应用的描述

对于 Angular2 - 这里是关于如何让 ZoomCharts 在 angular-seed 应用程序中运行的分步说明。请注意，它们仅描述了在种子应用程序中运行示例的步骤，而不是构建功能齐全的组件所需的步骤。

1. 将zoomcharts.d.ts文件复制到/tools/manual_typings/project/ 文件夹中。

2. 通过在zoomcharts.d.ts文件顶部添加以下行来修改文件以支持 CommonJS/SystemJS 模块系统：

declare module "ZoomCharts" { export = ZoomCharts; }

3. 在tools\project.config.ts文件中将这一行添加到构造函数中（当然，使用 CDN 是可选的）以将库注册到 SystemJS 加载器：

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

4. 为图表创建一个新组件，例如， /src/client/app/home/zc-pie-chart.component.ts

``` ///

从'@angular/core'导入{组件，OnInit，ViewChild，AfterViewInit，ElementRef}；从“ZoomCharts”导入 { PieChart }；

@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. 在模块中注册组件（在本示例中为 home.module.ts）：

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

..声明：[..其他组件..，ZcPieChart]，..```

6. 将其添加到视图中，例如home.component.html：

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

2.与 Webpack 集成

注意：我使用 Webpack 2.2.1 对此进行了测试。

使用 Webpack，您可以使用简单import ZoomCharts from './zoomcharts/zoomcharts.js';并且工作正常 - 包括捆绑zoomcharts.js代码。

尽管在这种情况下，ZoomCharts 现在会自动加载依赖项， moment.js即使它们已经包含在 webpack 包中。为了启用moment.js从包中加载，我使用了这个 webpack.config.js文件（并使用了 imports-loader 插件）：

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

options: { "moment": "moment", "momentTimezone": "moment-timezone", // 根据 zoomcharts.js 的要求设置 window.moment 的解决方法 "_": ">window.moment=moment;" } } } ], } }; ```

Answer 2

首先安装 zoomchart 依赖

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>

在 ts 文件中创建一个方法

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

}

}

在我的示例this.zc.ANY_CHART中，您可以使用任何图表而不是饼图