如何整合縮放圖表與角2

Question

這是可能的結合縮放圖表角2need基本思想是任何人做過這個之前，沒有發現任何線程在互聯網上這與此相關，這就是爲什麼我問這裏，任何線索？

Answer 1

1. Description based on angular-seed application

對於Angular2 - 這裏是一步如何讓 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

```///

進口{元器件，的OnInit，ViewChild，AfterViewInit，ElementRef} 從「@角/芯「;從「ZoomCharts」導入{PieChart};

@Component（{ 的moduleId：module.id， 選擇： 「ZC-餅圖」， 模板： 「餅圖正在初始化......」}）出口類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）：

``從 './zc-pie-chart.component'`進口{ZcPieChart};

..聲明：[..other部件..，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代碼的捆綁 。即使它們已經包含在的WebPack 束

雖然在這種情況下ZoomCharts現在將自身加載相關性，如 moment.js。從束使裝載moment.js，我用這個 webpack.config.js文件（和使用該 imports-loader 插件）：

```的js變種路徑=要求（ '路徑'）;

module.exports = { 條目：」 ./index.js'， 輸出：{ 文件名： 'bundle.js'， 路徑：path.resolve（__目錄名） }， 決心：{ 別名：{ 「片刻」：path.resolve（__ dirname，「zoomcharts」，「assets」，「moment.js」）， 「moment-timezone」：path.resolve（__ dirname，「zoomcharts」，「assets」， 「矩tz.js」）， 「zoomcharts」：path.resolve（__目錄名稱， 「zoomcharts」， 「zoomcharts.js」）， } }， 模塊：{ 規則：[ { 測試：path.resolve（__目錄名稱， 「zoomcharts」， 「zoomcharts.js」）， 裝載機：{ 裝載機： 「進口裝載機」， 選項：{ 「時刻」： 「時刻」， 「 momentTimezone「：」moment-timezone「， //根據zoomcharts.js的要求設置window.moment的解決方法 」_「：」> window.moment = moment;「 } } } ]， }}; ```