typescript - Får "Highcharts-feil #17" når jeg lager histogram (bruker Highcharts med Angular 6)

Jeg prøver å lage et enkelt histogram med Highcharts i Angular, og jeg får følgende feil:

ERROR Error: Highcharts error #17: www.highcharts.com/errors/17
    at Object.a.error (highcharts.js:10)
    at a.Chart.initSeries (highcharts.js:245)
    at highcharts.js:270
    at Array.forEach (<anonymous>)
    at a.each (highcharts.js:28)
    at a.Chart.firstRender (highcharts.js:270)
    at a.Chart.<anonymous> (highcharts.js:245)
    at a.fireEvent (highcharts.js:31)
    at a.Chart.init (highcharts.js:244)
    at a.Chart.getArgs (highcharts.js:244)

Jeg følger den følgende veiledningen som er gitt av Highcharts:

https://www.highcharts.com/docs/chart-and-series-types/histogram-series

Etter å ha lest om feilen «type finnes ikke» (Highcharts-feil #17), ser det ut til at Highcharts tror at jeg mangler en utvidelsesfil kalt «highcharts-more.js». Jeg har prøvd mange forskjellige implementeringer som inkluderer filen «highcharts-more.js» i løsningen, men har ikke hatt hell med å løse feilen.

Her er koden min:

app.component.html

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/histogram-bellcurve.js"></script>

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

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Chart } from 'angular-highcharts';
import * as Highcharts from 'highcharts';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
    public testHistogram: Chart;

    ngOnInit() {
        this.createHistogram();
    }

    createHistogram(): void {
        var options = {
            title: {
                text: 'Test Histogram'
            },
            xAxis: [{
                title: {
                    text: 'time (ms)'
                }
            }],
            yAxis: [{
                title: {
                    text: '# of items'
                }
            }],
            series: [{
                name: 'Lag Histogram',
                type: 'histogram',
                xAxis: 1,
                yAxis: 1,
                baseSeries: 1
                }, {
                data: [3.5, 3, 3.2, 3.1, 3.6, 3.9, 3.4]
            }]
        }

        this.testHistogram = new Chart(<any> options);
    }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';  //for the dashboard view
import { ChartModule } from 'angular-highcharts';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
      BrowserModule,
      FormsModule,
      ChartModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Jeg er klar over at det ble stilt et lignende spørsmål om å lage et histogram med Highcharts og Angular (Highcharts-feil #17 når man legger til serier i diagrammet ved bruk av Angular 4). Imidlertid bruker jeg en veldig enkel tilnærming som er henvist direkte fra Highcharts' nettsted, og det var noen få detaljer som manglet fra det forrige spørsmålet.

Jeg tenker at bruk av histogram-serietypen ikke burde kreve filen "highcharts-more.js" og burde allerede være tilgjengelig så lenge modulen "modules/histogram-bellcurve.js" og filen "highcharts.js" er inkludert.

Også, i min .ts, ser det ut til at når data-attributtet er inkludert i series-alternativet, gir det en feil. Men hvis jeg fjerner data-attributtet (noe som er nødvendig for å lage histogrammet), og gjør det slik at series-alternativet ikke lenger er et array med 2 elementer, får jeg ikke feilen. Men jeg har selvfølgelig fortsatt ikke et histogram av data å vise. Dette får meg til å lure på om Highchart først sjekker histogramtypen til series-alternativet og de nødvendige tilhørende attributtene (sørger for at de alle er spesifisert og satt til å samsvare med et histogramdiagram), før den anser et diagram som av typen "histogram", eller om det bare avgjøres ut fra hvilken type som er spesifisert, uten å ta hensyn til attributtene som er inkludert/spesifisert.

Hvis noen der ute har en fungerende løsning som oppretter og fyller et histogram Highchart med suksess ved bruk av Angular, vil jeg gjerne vite hvordan man gjør dette.

Svar #1

Denne feilen oppstår når du prøver å lage et diagram med serier som ikke eksisterer. Jeg ser at du ikke importerte histogrammodulen korrekt. Du bør slette <script>-tagger fra din app.component.html-fil, og importere modulene inne i app.module.ts.

I tillegg, for å få det til å fungere, må du importere det aktuelle modul i den nevnte filen, akkurat slik:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';  //for the dashboard view
import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
import * as histogram from 'highcharts/modules/histogram-bellcurve';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
      BrowserModule,
      FormsModule,
      ChartModule
  ],
  providers: [
      { provide: HIGHCHARTS_MODULES, useFactory: () => [histogram] }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Jeg anbefaler også at du bruker den offisielle highcharts-angular wrapperen, som er veldig godt dokumentert og du bør ikke ha noen problemer med å lage ditt eget diagram. I tillegg er den bedre støttet enn uoffisielle versjoner. Her er linken til npm-pakken: https://www.npmjs.com/package/highcharts-angular

Relaterte artikler