我第一次使用HighCharts,事实证明很难找到帮助我解决此问题的资源。
我正在尝试显示具有不同系列编号的多个图表。我不想设置多个选项模板,而只想使用一个模板并使用一个函数自定义选项对象。在这里,我提供了从API接收到的其中一张图表的模拟数据。在应用程序中,我计划从HTML进行馈送。
由于我对HighCharts的缺乏了解,我不断遇到各种问题,现在我只是四处转转,只解决一个问题,仅是一个过去的问题再次出现,我希望有人能指出我正确的观点方向。 这是我的课程:
export class CompletenessTabComponent implements OnInit, AfterViewInit {
@ViewChild('chartTarget') chartTarget: ElementRef;
chart: Highcharts.ChartObject;
dataObj = {"id":0,
"tableName":"d1 vs d2",
"data":{"d1Count":[50,45,55,60,70],
"d2Count":[40,32,55,58,33],
"Errors":[2,3,4,1,0]},
"dates":[20180927,20180928,20181001,20181002,20181003]
};
constructor() { }
setHighChartOptions(data, seriesNames, chartTitle ): any {
count = 1;
highChartOptions.title.text = chartTitle;
highChartOptions.xAxis.data = data.dates;
this.chart.series[0].setData(this.dataObj.data[0]);
Object.keys(data.data).forEach((key) =>
this.chart.addSeries({
name: seriesNames[count],
data: data.data[key],
type: 'line'
}) count ++
);
return highChartOptions;
}
getHighChartOptions(){
return highChartOptions;
}
ngOnInit() {
this.chart = chart(this.chartTarget.nativeElement, this.setHighChartOptions(this.dataObj, ['d1', 'd2', 'error'], this.dataObj.tableName));
Object.keys(this.dataObj.data).forEach(key =>
console.log(key, this.dataObj.data[key]))
}
ngAfterViewInit() {
}
}
const highChartOptions = {
colors:
['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
credits: {
enabled: false
},
chart: {
backgroundColor: null,
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
itemStyle: {
fontSize: '10px',
fontWeight: 'normal'
}
},
tooltip: {
valuePrefix: '$'
},
title: {
text: ''
},
xAxis: {
type: 'date',
data: [],
title: 'date'
},
yAxis: {
title: {
align: 'middle',
rotation: 0,
text: ''
}
},
plotOptions: {
series: {
marker: {
enabled: false
},
shadow: false
}
},
series: [{
type: 'line',
name: '',
data: [null]
}]
};
我不断收到的一些错误是:
setHighChartOptions()中的:无法读取未定义的属性“系列”(位于this.chart.series [0]),也无法读取未定义的“键”(在ForEach循环开始时)。
我相信最大的问题是图表对象未定义,这没有意义,因为我已经在类的顶部实例化了它,然后在onInit上设置了图表选项。
希望您能发现我的错误并为我提供帮助。谢谢。
答案 0 :(得分:1)
首先,您必须小心在Angular项目中正确导入所有js包:
import { chart } from 'highcharts';
import * as Highcharts from 'highcharts';
此外,您还必须检查是否已使用“ npm”正确安装了软件包?
毕竟,以我的观点,此示例可以帮助您更好地了解如何在项目中使用“ highcharts”软件包,其他配置取决于您所使用的“ highcharts”版本。
import { Component, ElementRef, ViewChild } from '@angular/core';
import { chart } from 'highcharts';
import * as Highcharts from 'highcharts';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Highcharts Sample';
@ViewChild('chartTarget') chartTarget: ElementRef;
chart: Highcharts.ChartObject;
ngAfterViewInit() {
const options: Highcharts.Options = {
chart: {
type: 'bar'
},
title: {
text: 'Sample Title'
},
xAxis: {
categories: ['Top Test', 'Test 2', 'Test3']
},
yAxis: {
title: {
text: 'Fox Rex'
}
},
series: [{
name: 'Tomi',
data: [1, 0, 4]
}, {
name: 'Alex',
data: [5, 7, 3]
}]
};
this.chart = chart(this.chartTarget.nativeElement, options);
}
addSeries(){
this.chart.addSeries({
name:'Test',
data:[2,3,7]
})
}
}
示例的HTML模板:
<div #chartTarget>
chart target sample
</div>
此外,您必须将数据提供给highcharts,因为该格式是标准格式,请在highcharts网站上的示例中查看JSON示例数据格式。
答案 1 :(得分:1)
很可能是因为您尝试引用尚未定义的系列。实际上,如果您是第一次调用setHighchartsOptions
,则尚未定义图表。
为了使其工作,请首先尝试初始化图表(甚至可以是没有任何数据的空图表),然后在Chart
对象上调用另一个方法,例如addSeries
。像这样,但是我没有看到整个应用程序,因此很难编写完全调整的解决方案。
ngOnInit() {
this.chart = chart(this.chartTarget.nativeElement, {});
this.chart.update(this.setHighChartOptions(this.dataObj, ['d1', 'd2', 'error'], this.dataObj.tableName))
Object.keys(this.dataObj.data).forEach(key =>
console.log(key, this.dataObj.data[key]))
}