развертка angular2-highcharts не работает - PullRequest
Новая
       9

развертка angular2-highcharts не работает

0 голосов
/ 25 апреля 2018

Я использую angular2-highcharts в угловом проекте, и развертка не работает.

У меня есть это в моем app.module: 

import { ChartModule } from 'angular2-highcharts';
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';
import * as highcharts from 'Highcharts';
import * as drilldown from 'Highcharts/modules/drilldown';
import * as highdata from 'Highcharts/modules/data';

export function highchartsFactory() {
    const hc = highcharts;
    const dd = drilldown;
    const hd = highdata;
    dd(hc);
    hd(hc);

    return hc;
}

imports: [
    BrowserModule,
      HttpModule,
      ChartModule

  ],

providers: [dataService, {provide: HighchartsStatic,
      useFactory: highchartsFactory
  }],

Я отправляю данные вкомпонент диаграммы с помощью @Output с двумя параметрами (серия и развертка) - в app.component: 

@Output() currentTestDrilldown=[];
    @Output() currentTestSeries=[];

Мой компонент диаграммы добавляется в app.component следующим образом: 

<app-chart-drilldown [data]="currentTestSeries" [drill]="currentTestDrilldown"></app-chart-drilldown>

Мой пример компонента развертки диаграммы: 

import {Component, Input, OnChanges, OnInit} from '@angular/core';

@Component({
  selector: 'app-chart-drilldown',
  templateUrl: './chart-drilldown.component.html',
  styleUrls: ['./chart-drilldown.component.css']
})
export class ChartDrilldownComponent implements OnInit, OnChanges {
    @Input() data:any;
    @Input() drill:any;
    chart : any;
    chartOptions: any;
  constructor() { }

    saveInstance(chartInstance) {
        this.chart = chartInstance;
    }

    ngOnChanges(){
        this.drawGraph();
    }


    drawGraph(){
        this.chartOptions = {
            colors: ['#E4EE2B', '#A5D36B', '#67B9AC', '#37A4DD', '#3F8AE2', '#6F6DC8', '#A04FAE', '#D82F90', '#F02E75', '#F4435E', '#F7544C'],
            chart: {
                type: 'column',
                backgroundColor:'transparent',
                animation: {
                    duration: 1000
                }
            },
            plotOptions: {
                series: {
                    groupPadding: 0.05,
                    shadow: {
                        color: 'rgba(0, 0, 0, 0.7)',
                        width: 15
                    },
                    borderColor: 'transparent'
                }
            },
            legend: {
                itemStyle: {
                    color: '#fff',
                },
            },
            title: {
                text: '',
            },
            credits: {
                enabled: false
            },
            xAxis: {
                categories: ['']
            },
            yAxis: {
                title: {
                    text: ''
                }
            },
            "series": this.data,
            "drilldown": this.drill,
        }
    }

    ngOnInit() {

    }


}

Компоненты развертки диаграммы HTML: 

<chart [options]="chartOptions" style="display:block" type="chart" class="fade-in-chart" (load)="saveInstance($event.context)"></chart>

Спасибо за вашу помощь!

1 Ответ

0 голосов
/ 26 апреля 2018

Попробуйте использовать следующий код 

export function highchartsModules() {
  // apply Highcharts Modules to this array
  return [ drilldown, highdata ];
}

.

export function highchartsFactory() {
    const hc = highcharts;
    const dd = drilldown;
    const hd = highdata;
    dd(hc);
    hd(hc);

    return hc;
}

Надеюсь, это поможет вам, и, как рекомендация, я работаю со следующим репозиторием, и работает таблица детализации.

Angular-Highcharts

...