Как интегрировать зум Диаграмма с угловым 2

Question

Возможно ли интегрировать Zoom-диаграмму с угловой идеей 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.tsfile добавьте эту строку в конструктор (конечно, использование 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} из '@angular/core'; импортировать { PieChart } из "ZoomCharts";

@Component ({moduleId: module.id, селектор: "zc-pie-chart", шаблон: "PieChart инициализируется..." }) класс экспорта 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):

`` `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 само по себе, даже если они уже включены в комплект веб-пакетов. Чтобы включить загрузку moment.jsиз комплекта я этим пользовалсяwebpack.config.jsфайл (и используяimports-loader плагин):

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

module.exports = {entry: './index.js', вывод: {имя файла: 'bundle.js', путь: path.resolve(__dirname) }, разрешение: { 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"), } }, модуль: { rules: [ { test: path.resolve(__dirname, "zoomcharts", "zoomcharts.js"), загрузчик: {загрузчик: "import-loader", параметры: { "moment": "moment", "momentTimezone": "moment-timezone", // обходной путь, который устанавливает window.moment в соответствии с требованиями zoomcharts.js "_": ">window. момент = момент;" } } } ], } }; ```

Answer 2

Сначала установите зависимость от zoomchart

Установка npm --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