Kendo UI图表背后的代码

Question

在我的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);
    }
  }
}

我期望达到与here所述的相同行为。