如何整合缩放图表与角度2

Question

这是否可以整合缩放图表与角度2的基本想法是任何人之前做过这个，没有找到任何与互联网相关的线程，这就是为什么我在这里问，任何线索？

Answer 1

1。 Description based on angular-seed application

  

对于Angular2 - 这里有关于如何获得的分步说明   在angular-seed应用程序中运行的ZoomCharts。请注意他们   仅描述在种子内运行样本的步骤   应用程序，而不是构建完整功能所需的步骤   成分

     

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

     

```///

     

import {Component，OnInit，ViewChild，AfterViewInit，ElementRef}   来自＆＃39; @ angular / core＆＃39 ;;从＆＃34; ZoomCharts＆＃34;;

导入{PieChart}      

@Component（{       moduleId：module.id，       选择器：＆＃34; zc-pie-chart＆＃34;，       模板：＆＃34; PieChart正在初始化......＆＃34; }）导出类ZcPieChart实现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）：

     

````导入{ZcPieChart}来自＆＃39; ./ zc-pie-chart.component＆＃39;;

     

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

     

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

     

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

2。 Integration with Webpack

  

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

     

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

     

虽然在这种情况下，ZoomCharts现在会加载依赖项，例如   即使它们已经包含在webpack中，它本身也是moment.js   束。为了从捆绑中启用加载moment.js，我使用了它   webpack.config.js文件（并使用   imports-loader   插件）：

     

````js var path = require（＆＃39; path＆＃39;）;

     

module.exports = {       条目：＆＃39; ./ index.js＆＃39;，       输出：{           文件名：＆＃39; bundle.js＆＃39;，           path：path.resolve（__ dirname）       }，       解决：{           别名：{               ＆＃34;时刻＆＃34;：path.resolve（__ dirname，＆＃34; zoomcharts＆＃34;，＆＃34; assets＆＃34;，＆＃34; moment.js＆＃34;），               ＆＃34; moment-timezone＆＃34;：path.resolve（__ dirname，＆＃34; zoomcharts＆＃34;，＆＃34; assets＆＃34;，＆＃34; moment-tz.js＆＃34;），               ＆＃34; zoomcharts＆＃34;：path.resolve（__ dirname，＆＃34; zoomcharts＆＃34;，＆＃34; zoomcharts.js＆＃34;），           }       }，       模块：{           规则：[               {                   test：path.resolve（__ dirname，＆＃34; zoomcharts＆＃34;，＆＃34; zoomcharts.js＆＃34;），                   装载机：{                       loader：＆＃34; imports-loader＆＃34;，                       选项：{                           ＆＃34;时刻＆＃34;：＆＃34;时刻＆＃34;，                           ＆＃34; momentTimezone＆＃34;：＆＃34; moment-timezone＆＃34;，                           //根据zoomcharts.js的要求设置window.moment的变通方法                           ＆＃34; _＆＃34;：＆＃34;＆gt; window.moment = moment;＆＃34;                       }                   }               }           ]       }}; ```

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