我正在尝试在 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 网站引用的非常简单的方法,并且上一个问题中缺少一些细节。
我认为使用直方图系列类型应该不需要“highcharts-more.js”文件并且只要“模块”就应该已经可用/histogram-bellcurve.js”模块和“highcharts.js”文件。
此外,在我的 .ts 中,当数据属性包含在 series 选项中时,它似乎会抛出错误。但是,如果我删除数据属性(创建直方图所需的东西),并使 series 选项不再是包含 2 个元素的数组,我不会收到错误.但是我当然仍然没有要显示的数据直方图。这让我想知道 Highchart 在将图表视为是“直方图”类型,或者如果只是根据指定的类型决定,则忽略包含/指定的属性。
如果有人有一个可行的解决方案,可以使用 Angular 成功创建和填充直方图 Highchart,我很想知道如何做到这一点。
最佳答案
当您尝试创建包含不存在的系列的图表时会抛出此错误。我看到您没有正确导入直方图模块。你应该删除 <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 - 创建直方图时获取 "Highcharts error #17"(使用 Highcharts 和 Angular 6),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52107946/