HighCharts Fehler # 17 für Pyramidendiagramm angular2

Question

Ich baue eine eckige App. Ich brauche ein Pyramidendiagramm, das ich aus einem API-Aufruf bevölkere. Das Pyramidendiagramm wird nicht geladen. Es wirft HighCharts Error # 17 beim Ausführen. Pyramide verwendet highchart /modules/funnel.js und expoting.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

Below Änderungen funktionieren.

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

Stellen Sie sicher, Highcharts installiert haben, wenn es nicht installieren, indem

npm install highcharts 

Auch Winkelbündel hinzufügen Verwendung für highcharts in system.config.js

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