Получение "Highcharts error # 17" при создании гистограммы (используя Highcharts с Angular 6) - PullRequest
Новая
       23

Получение "Highcharts error # 17" при создании гистограммы (используя Highcharts с Angular 6)

0 голосов
/ 31 августа 2018

Я пытаюсь создать простую гистограмму с Highcharts в Angular, и я получаю следующую ошибку: 

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)

Я ухожу из следующего урока, предоставленного Highcharts:

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

После прочтения об ошибке «тип не существует» (ошибка Highcharts # 17), кажется, что Highcharts думает, что мне не хватает файла расширения, называемого «highcharts-more.js». Я пробовал много разных реализаций, которые включают в себя файл «highcharts-more.js» в решении, но мне не повезло с решением этой ошибки.

Вот мой код:

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 { }

Мне известно, что был задан аналогичный вопрос о создании гистограммы с Highcharts and Angular ( Highcharts error # 17 при добавлении рядов в диаграмму с использованием угловых 4 ). Однако я использую очень простой подход, на который ссылаются непосредственно с сайта Highcharts, и в предыдущем вопросе не хватает нескольких деталей.

Я думаю, что для использования гистограммы серии должен , а не требуется файл "highcharts-more.js" и он должен быть доступен до тех пор, пока "модули / гистограмма" -bellcurve.js "модуль и файл" highcharts.js "включены.

Кроме того, в моем .ts, кажется, что когда атрибут данных включен в параметр series , он выдает ошибку. Однако если я удалю атрибут данных (что требуется для создания гистограммы) и сделаю так, чтобы опция series больше не была массивом с 2 элементами, я не получу сообщение об ошибке. Но у меня все еще, конечно, нет гистограммы данных, чтобы показать. Это заставляет меня задуматься, проверяет ли Highchart тип гистограммы опции ряда и на необходимые ей соответствующие атрибуты (убедившись, что все они заданы и установлены в соответствии с гистограммой), прежде чем считать диаграмму типа "гистограмма" или, если это просто определено, какой тип указан, игнорируя включенные / указанные атрибуты.

Если у кого-то есть работающее решение, которое успешно создает и заполняет гистограмму Highchart с использованием Angular, я хотел бы знать, как это сделать.

1 Ответ

0 голосов
/ 31 августа 2018

Эта ошибка выдается, когда вы пытаетесь создать диаграмму с несуществующей серией. Я вижу, что вы неправильно импортировали модуль гистограммы. Вы должны удалить теги <script> из вашего файла app.component.html и импортировать модули внутри 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, 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 { }

Кроме того, я рекомендую вам использовать официальную оболочку highcharts-angular, которая очень четко задокументирована, и у вас не должно возникнуть никаких проблем при создании собственного графика. Кроме того, он лучше поддерживается, чем неофициальные. Вот ссылка на пакет npm: https://www.npmjs.com/package/highcharts-angular

...