首页 文章

创建直方图时获取“Highcharts error#17”(使用带有Angular 6的Highcharts)

提问于
浏览
0

我正在尝试使用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) . 但是,我是'm using a very simple approach referenced directly from Highcharts'网站,并且上一个问题中缺少一些细节 .

我认为使用直方图系列类型应该 not 需要"highcharts-more.js"文件,并且只要包含"modules/histogram-bellcurve.js"模块和"highcharts.js"文件就应该可用 .

此外,在我的.ts中,似乎当数据属性包含在系列选项中时,它会抛出错误 . 但是,如果我删除了数据属性(创建直方图所需的东西),并使其成为系列选项不再是具有2个元素的数组,那么我不需要显示数据的直方图 . 这让我想知道Highchart是否首先检查系列选项 and 的直方图类型是否需要相应的属性(确保它们都被指定并设置为与直方图的匹配),然后才能确定图表类型为"histogram"或者如果是只是根据指定的类型决定,忽略包含/指定的属性 .

如果有人在那里有一个工作解决方案,使用Angular成功创建和填充直方图Highchart,我很想知道如何做到这一点 .

1 回答

  • 0

    如果存在're trying to create a chart with series which doesn',则会抛出此错误 . 我看到你没有正确导入直方图模块 . 您应该从 app.component.html 文件中删除 <script> 标签,然后导入 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 包装器,这是非常清楚的文件记录,你不应该比非官方的更好地支持't have any problems with building your own chart. Additionally it' . 这是 npm 包的链接:https://www.npmjs.com/package/highcharts-angular

相关问题