Кендо UI диаграммы в коде позади - PullRequest
Новая
       50

Кендо UI диаграммы в коде позади

0 голосов
/ 03 июля 2018

В моем проекте angular 5 я хочу добавить директиву, которая добавит панель навигации к любому приложенному графику. Для этого мне нужно динамически добавить панель, ось категории, ось значений и некоторые серии на диаграмму в коде директивы. Как я могу это сделать? Я пытался добавить его в разные хуки, такие как ngAfterContentInit, но безрезультатно. Какова общая стратегия для таких вещей?

код: 

import {
  Directive,
  Input,
  AfterContentInit,
  OnDestroy
} from '@angular/core';
import {
  ChartComponent,
  PaneComponent,
  CategoryAxisItemComponent,
  ValueAxisItemComponent,
  SeriesItemComponent,
  CategoryAxisLabelsComponent,
  CategoryAxis,
  ValueAxis
} from '@progress/kendo-angular-charts';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import { CollectionService } from '@progress/kendo-angular-charts/dist/es2015/common/collection.service';
import { Subscription } from 'rxjs/Subscription';

@Directive({
  selector: '[appChartNaviagation]'
})
export class ChartNaviagationDirective implements AfterContentInit {

  private navigationMin = new BehaviorSubject<Date>(undefined);

  private navigationMax = new BehaviorSubject<Date>(undefined);

  constructor(private chart: ChartComponent) {

  }

  ngAfterContentInit(): void {

    const navigationPane = new PaneComponent(this.chart.configurationService, new CollectionService());
    navigationPane.name = 'navigator';
    navigationPane.height = 100;
    this.chart.panes.push(navigationPane);

    const navigationCategoryAxis = new CategoryAxisItemComponent(this.chart.configurationService, new CollectionService());
    navigationCategoryAxis.name = 'navigatorCategories';
    navigationCategoryAxis.pane = 'navigator';
    this.chart.categoryAxis = [
      this.chart.categoryAxis as CategoryAxis || new CategoryAxisItemComponent(this.chart.configurationService, new CollectionService()),
      navigationCategoryAxis
    ];        
    const mainAxis = <CategoryAxisItemComponent>this.chart.categoryAxis[0];

    const navigationValueAxis = new ValueAxisItemComponent(this.chart.configurationService, new CollectionService());
    navigationCategoryAxis.name = 'navigationValues';
    navigationCategoryAxis.pane = 'navigator';
    const axisLabels = new CategoryAxisLabelsComponent(this.chart.configurationService);
    axisLabels.visible = false;
    navigationCategoryAxis.labels = axisLabels;

    this.chart.valueAxis = [
      this.chart.valueAxis as ValueAxis || new ValueAxisItemComponent(this.chart.configurationService, new CollectionService()),
      navigationValueAxis
    ];        

    if (this.navigationData) {
      const naviagationSeries = new SeriesItemComponent(this.chart.configurationService, undefined);
      naviagationSeries.type = 'area';
      naviagationSeries.line = { style: 'smooth' };
      naviagationSeries.data = this.navigationData;
      naviagationSeries.field = 'value';
      naviagationSeries.categoryField = 'time';
      naviagationSeries.axis = 'navigationValues';
      naviagationSeries.categoryAxis = 'navigatorCategories';
      naviagationSeries.aggregate = 'sumOrNull';

      this.chart.series.push(naviagationSeries);
    }
  }
}

Я ожидаю, чтобы достичь того же поведения, как описано здесь .

...