Highcharts error #17 when adding series to the chart using angular 4

问题:

I am trying to implement a histogram high chart using angular 4. I am getting error "Highcharts error #17 when adding series to the chart. My code is as follows. The series happens to look fine not sure what the problem could be

Histogram component

import { Component, Input } from '@angular/core';  @Component({     selector: 'histogram',     template: '<chart [options]="options" (load)="getInstance($event.context)"></chart>',     styles: [`         chart{               display: block;               width: 100% !important;               padding:0;         }     `] }) export class HistogramChartComponent {      public options: any;     chart: any;      @Input() public series: any;      constructor() {          this.options = {              chart: {                 type: 'histogram'             },              title: {                 text: ''             },              legend: {                 enabled: false             },               series: []         };     }      getInstance(chartInstance): void {         this.chart = chartInstance;         this.redraw();     }       ngOnChanges(data: any) {         if (!data.series.currentValue || !this.chart) return;         data.series.currentValue.map(s => {             this.chart.addSeries(s);         });         this.chart.reflow();     }      redraw() {         if (!this.chart) return;         console.log(this.series);         this.chart.addSeries(this.series);     }  } 

Ending surplus Component that host the histogram component

import { Component, OnInit, Input } from '@angular/core'; import { EndingSurplus } from '../../../../api/dtos';  export interface ChartSeries {    data: number[];  }  @Component({   selector: 'app-ending-surplus-analysis',   templateUrl: './ending-surplus-analysis.component.html', }) export class EndingSurplusAnalysisComponent implements OnInit {   isExpanded = false;    @Input() results: Array<EndingSurplus>  = [];  chartSeries: Array<ChartSeries> = [];    constructor() { }    ngOnInit() {     this.addSeries();   }    private addSeries() {      this.results.forEach(element => {       if (element.data != null)         this.chartSeries.push({ data: element.data});     });   }  } 

Ending surplus Component html

 <div *ngIf="!showTable" class="tab-pane base-strategy-chart fade show active" id="base-strategy-chart--nva" role="tabpanel"           aria-labelledby="chart-tab">           <div class="tb-container">              <div class="tb-row d-flex flex-row">               <div class="tb-cell col-12">                 <histogram [series]="chartSeries">                </histogram>                  </div>              </div>           </div>            <!-- sta Chart End -->         </div> 

回答1:

I am able to recreate sample Histogram Highchart with Angular-Highcharts directive in Angular application. Please refer my stackblitz working version and below is my sample code

app.module.ts

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms';  import { AppComponent } from './app.component'; import { HelloComponent } from './hello.component'; import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';   @NgModule({   imports:      [ BrowserModule, FormsModule, ChartModule ],   declarations: [ AppComponent, HelloComponent ],   bootstrap:    [ AppComponent ],  }) export class AppModule { } 

app.component.ts

import { Component } from '@angular/core'; import { Chart } from 'angular-highcharts'; @Component({   selector: 'my-app',   templateUrl: './app.component.html',   styleUrls: [ './app.component.css' ] }) export class AppComponent  {   name = 'Angular 5';   histogram : Chart;   data= [3.5, 3, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3, 3, 4, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3, 3.8, 3.2, 3.7, 3.3, 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2, 3, 2.2, 2.9, 2.9, 3.1, 3, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3, 2.8, 3, 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3, 3.4, 3.1, 2.3, 3, 2.5, 2.6, 3, 2.6, 2.3, 2.7, 3, 2.9, 2.9, 2.5, 2.8, 3.3, 2.7, 3, 2.9, 3, 3, 2.5, 2.9, 2.5, 3.6, 3.2, 2.7, 3, 2.5, 2.8, 3.2, 3, 3.8, 2.6, 2.2, 3.2, 2.8, 2.8, 2.7, 3.3, 3.2, 2.8, 3, 2.8, 3, 2.8, 3.8, 2.8, 2.8, 2.6, 3, 3.4, 3.1, 3, 3.1, 3.1, 3.1, 2.7, 3.2, 3.3, 3, 2.5, 3, 3.4, 3];    constructor() {    }   ngOnInit() {     this.histogram= new Chart({     title: {         text: 'Highcharts Histogram'     },     xAxis: [{         title: { text: 'Data' },         alignTicks: false     }, {         title: { text: 'Histogram' },         alignTicks: false,         opposite: true     }],      yAxis: [{         title: { text: 'Data' }     }, {         title: { text: 'Histogram' },         opposite: true     }],      series: [{         name: 'Histogram',         type: 'histogram',         xAxis: 1,         yAxis: 1,         baseSeries: 's1',         zIndex: -1     }, {         name: 'Data',         type: 'scatter',         data: this.data,         id: 's1',         marker: {             radius: 1.5         }     }] });   } } 

app.component.html

<div [chart]="histogram"></div> 

回答2:

Angular-highcharts doesn't import the any module besides the default by default. This means if you want anything that uses the highcharts-more module, or highcharts-exporting, or really anything, you have to write your own provider for it in the appropriate NgModule. The readme has this example for importing highcharts-more and highcharts-exporting:

import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts'; import * as more from 'highcharts/highcharts-more.src'; import * as exporting from 'highcharts/modules/exporting.src';  @NgModule({   providers: [     { provide: HIGHCHARTS_MODULES, useFactory: () => [ more, exporting ] } // add as factory to your providers   ] }) export class AppModule { }

文章来源: Highcharts error #17 when adding series to the chart using angular 4