Question

我在角度项目中使用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 drilldown无法正常工作

1 个答案: