Question

我正在尝试使用Angular中的Highcharts创建一个简单的直方图，并且收到以下错误：

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和Angular（Highcharts error #17 when adding series to the chart using angular 4）创建直方图时也遇到了类似的问题。但是，我使用的是一种非常简单的方法，直接从Highcharts的站点引用，并且上一个问题缺少一些细节。

我认为使用 histogram 系列类型应该不需要“ highcharts-more.js”文件，并且只要“模块” /histogram-bellcurve.js”模块和“ highcharts.js”文件。

此外，在我的.ts文件中，当data属性包含在 series 选项中时，它会引发错误。但是，如果我删除了data属性（创建直方图所必需的东西），并且使它成为 series 选项不再是包含2个元素的数组，则不会收到错误消息。但是我当然仍然没有要显示的数据直方图。这让我想知道Highchart是否先检查系列选项的直方图类型及其必需的相应属性（确保它们都已指定并设置为与直方图相匹配），然后再将图表视为可以是“直方图”类型，或者只是根据指定的类型决定，而无需考虑包含/指定的属性。

如果那里有人可以使用Angular成功创建并填充直方图Highchart的可行解决方案，我很想知道一个人怎么做。

Answer 1

当您尝试创建不存在序列的图表时，抛出此错误。我看到您没有正确导入直方图模块。您应该从<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

创建直方图时（在Angular 6中使用Highcharts）时出现“ Highcharts错误＃17”

1 个答案: