Angular 获得;高位图表错误“17”;创建直方图时(使用角度为6的Highcharts)
我正在尝试创建一个简单的直方图,其中包含角度高的图表,我收到以下错误:Angular 获得;高位图表错误“17”;创建直方图时(使用角度为6的Highcharts),angular,typescript,highcharts,histogram,Angular,Typescript,Highcharts,Histogram,我正在尝试创建一个简单的直方图,其中包含角度高的图表,我收到以下错误: 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>
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网站引用的非常简单的方法,前面的问题缺少一些细节
我认为使用直方图系列类型应该而不是需要“highcharts more.js”文件,并且只要包含“modules/histogram bellcurve.js”模块和“highcharts.js”文件,就应该已经可用
另外,在my.ts中,当数据属性包含在series选项中时,它会抛出错误。但是,如果我删除了data属性(创建直方图所需的东西),并使其使series选项不再是包含2个元素的数组,则不会收到错误。但我当然仍然没有数据的柱状图来显示。这让我想知道Highchart是否先检查序列选项的直方图类型和它所需的相应属性(确保它们都被指定并设置为与直方图的属性相匹配),然后再将图表视为“直方图”类型,或者是否刚刚决定了指定的类型,忽略包含/指定的属性
如果有人有一个工作解决方案,可以使用Angular成功地创建和填充柱状图,我很想知道如何做到这一点。当您尝试创建一个不存在序列的图表时,会抛出此错误。我发现您没有正确导入直方图模块。您应该从
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
wrapper,它有非常清晰的文档记录,您在构建自己的图表时不应该有任何问题。此外,它比非官方的支持更好。这是npm的链接:你也试过了吗?
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);
}
}
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 { }
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 { }