当我尝试将日期放在 x 轴上时,Angular Highcharts 区域样条图不起作用。我哪里做错了?
我希望我的图表具有相同类型的 x 轴数据(即日期格式)。在图表上的悬停点上,它应该为我提供带有数据的实际日期和时间。这是折线图,但我的是面积样条图。
{
"body": {
"httpstatuscode": 200,
"AppData": [
{
"disk": [
["Date.UTC(2024,05,09,04,59)",0.09272282759826356],
["Date.UTC(2024,05,07,15,14)",0.09238017230533957],
["Date.UTC(2024,05,07,23,22)",0.09246349058006409]
],
"load": [
["Date.UTC(2024,05,09,04,59)",0.2327228273426356],
["Date.UTC(2024,05,07,15,14)",0.76238017230533957],
["Date.UTC(2024,05,07,23,22)",0.45246349058006409]
],
"cpu": [
["Date.UTC(2024,05,09,04,59)",0.1227228273426356],
["Date.UTC(2024,05,07,15,14)",0.54238017230533957],
["Date.UTC(2024,05,07,23,22)",0.89246349058006409]
],
"ram": [
["Date.UTC(2024,05,09,04,59)",0.3427228273426356],
["Date.UTC(2024,05,07,15,14)",0.54238017230533957],
["Date.UTC(2024,05,07,23,22)",0.65246349058006409]
]
},
{
"disk": [
["Date.UTC(2024,05,09,04,59)",0.23272282759826356],
["Date.UTC(2024,05,07,15,14)",0.65238017230533957],
["Date.UTC(2024,05,07,23,22)",0.76246349058006409]
],
"load": [
["Date.UTC(2024,05,09,04,59)",0.3427228273426356],
["Date.UTC(2024,05,07,15,14)",0.56238017230533957],
["Date.UTC(2024,05,07,23,22)",0.67246349058006409]
],
"cpu": [
["Date.UTC(2024,05,09,04,59)",0.1227228273426356],
["Date.UTC(2024,05,07,15,14)",0.54238017230533957],
["Date.UTC(2024,05,07,23,22)",0.89246349058006409]
],
"ram": [
["Date.UTC(2024,05,09,04,59)",0.7927228273426356],
["Date.UTC(2024,05,07,15,14)",0.76238017230533957],
["Date.UTC(2024,05,07,23,22)",0.62246349058006409]
]
}
],
"opStatusCode": 2000,
"type": "SUCCESS",
"message": "DATA RECEIVED SUCCESSFULLY"
}
}
<div class="graphBodyDiv">
<highcharts-chart
[Highcharts]="highcharts"
[options]="chartOptions">
</highcharts-chart>
</div>
cpuData=[];
ramData=[];
loadData=[];
diskData=[];
constructor(private httpclient: HttpClient,private httpService: HttpService) {}
fetchData(){
this.httpService.getData(request).subscribe((response: any) => {
try {
const jsonBody = response['body'];
const appData = jsonBody['AppData'];
this.cpuData=appData['cpu']
this.loadData=appData['load']
this.ramData=appData['ram']
this.diskData=appData['disk']
this.createAreaSplineChart();
} catch (e: any) {
console.log('Error in parsing json ' + e.message);
}
return response;
});
}
highcharts:any;
chartOptions:any;
createAreaSplineChart(){
console.log("******* chart printed.")
this.highcharts=Highcharts
this.chartOptions = {
chart: {
type: 'areaspline'
},
title: {
text: "Area Spline graph"
},
legend : {
backgroundColor: '#FFFFFF'
},
xAxis:{
title: {
text: 'Hours',
// enabled: true
},
allowDecimals: false,
accessibility: {
rangeDescription: 'Range: 1 to 24.'
},
type: 'datetime',
dateTimeLabelFormats : {
hour: '%I %p',
minute: '%I:%M %p'
},
// categories: ['1','2','3','4','5','6','7','8','9'] ,
// min:0,
gridLineWidth: 1, // this is for vertical grid line
lineWidth: 0,
gridLineDashStyle: 'Solid',
labels: {
// autoRotationLimit: 30, // word-wrap
enabled: true, // to enable x-axis labels
},
},
yAxis : {
title: {
text: ''
},
// min:0
},
plotOptions : {
series: {
marker: {
enabled: false, // enable point highlight on line chart
states: {
hover: {
enabled: true // enable point highlight on hover
}
}
}
},
// area: {
// fillOpacity: 0.1
// },
areaspline: {
fillOpacity: 0.1
}
},
tooltip : {
shared: true
// valueSuffix: ' units'
},
credits:{
enabled: false
},
series: [
{
name: 'CPU',
data: this.cpuData,
color:'#0021FF',
lineWidth: 1.3
},
{
name: 'RAM',
data: this.ramData,
color:'#FF5238',
lineWidth: 1.3
},
{
name: 'Load',
data: this.loadData,
color:'#981FFF',
lineWidth: 1.3
},
{
name: 'Disk',
data: this.diskData,
color:'#00D6F2',
lineWidth: 1.3
}
]
};
}
您的代码看起来不错,我唯一要更改的是将数据格式更改为:
[Date.UTC(2024, 5, 7, 15, 14), 0.65238017230533957],
[Date.UTC(2024, 5, 7, 23, 22), 0.76246349058006409],
[Date.UTC(2024, 5, 9, 4, 59), 0.23272282759826356],
这是一个工作演示: https://stackblitz.com/edit/highcharts-angular-basic-line-2taahu?file=src%2Fapp%2Fapp.component.ts
如果出现问题或您有任何其他问题,请告诉我!