angular2-highcharts 向下钻取不起作用

Question

我在 angular 项目中使用 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>

感谢您的帮助！

Answer 1

使用以下代码试试

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

angular2-highcharts 向下钻取不起作用

angular2-highcharts drilldown not working

angular

angular2-highcharts