金字塔图角度2的高图表错误#17

Question

我正在构建一个角度应用程序。我需要一个从 api 调用填充的金字塔图。金字塔图无法加载。它在运行时抛出HighCharts错误#17。金字塔使用高图表/模块/漏斗.js和暴露.js

import { Component } from '@angular/core';
import { TestSubTypeSummaryService } from '../services/testSubTypeSummary.service';
import { OnInit } from '@angular/core'
var Highcharts = require('highcharts');
require ('funnel');
require('exporting');
var completeArray : any[] = [];
@Component({
    selector : 'pyramid-chart',
    template : `
        <div id="pyramid-div" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
    `
})
export class PyramidChart {
    foo:any;
    constructor(private fsService : TestSubTypeSummaryService){
    };
    ngAfterViewInit(){
        this.getTestSubTypeSummary();
    }
    getTestSubTypeSummary() : void{
        this.fsService.getTestSubTypeSummary().subscribe( data => {
            console.log("Chart Data: "+JSON.stringify(data));
            this.parseData(data);
              this.renderChart();
        });
    }
    parseData(data : any) : void{
        var count = data.length;
        for(var i = 0 ; i < count ; i++){
            var funcObjArray : [string,number];
            var typeName = data[i].testSubTypeName;
            var typeCount = data[i].testSubTypeCount
            funcObjArray = [typeName,typeCount];
            completeArray.push(funcObjArray);       
        }
    }
    renderChart() : void{
        Highcharts.chart({
        chart: {
            renderTo : 'pyramid-div',
            type: 'pyramid',
            marginRight: 100
        },
        title: {
            text: 'Test pyramid',
            x: -50
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b> ({point.y:,.0f})',
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
                    softConnector: true
                }
            }
        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Tests',
            data: completeArray
        }]
    });
    }
}

Answer 1

对于 Angular 6 或那些使用 web pack 的人可能需要这样的漏斗，

import { Chart, Highcharts } from 'angular-highcharts';
declare var require: any;
require('highcharts/modules/funnel')(Highcharts);

Answer 2

以下更改将起作用。

require('funnel')(HighCharts);
require('exporting')(HighCharts);

确保您已安装 Highcharts ，如果没有使用 安装

npm install highcharts

还要在 system.config 中为高图表添加角度丛.js

map:{
    'highcharts': 'node_modules/highcharts/highcharts.js',
    'exporting': 'node_modules/highcharts/modules/exporting.js',
    'funnel': 'node_modules/highcharts/modules/funnel.js'
    }