FEHLER TypeError: Eigenschaften von Null können nicht gelesen werden (lesen von „getAttribute“) ⇐ JavaScript

[Anonymous]

Wenn die Daten leer sind, erhalte ich diesen Fehler-> ERROR TypeError: Eigenschaften von Null können nicht gelesen werden (lesen von „getAttribute“)
Fehler:

Code: Select all

chunk-UOKKXAU3.js:7 ERROR TypeError: Cannot read properties of null (reading 'getAttribute')
at wT (chunk-FLTRA2LT.js:2:30682)
at VM (chunk-FLTRA2LT.js:15:65614)
at nnt (chunk-FLTRA2LT.js:15:65536)
**at n.drawGraph (chunk-EXIXHUOH.js:33:1018)**
at Object.next (chunk-EXIXHUOH.js:18:15207)
at io.next (chunk-UOKKXAU3.js:3:3101)
at we._next (chunk-UOKKXAU3.js:3:2784)
at we.next (chunk-UOKKXAU3.js:3:2511)
at Object.next (chunk-JDCFQ7WB.js:26:3066)
at io.next (chunk-UOKKXAU3.js:3:3101)

Die hervorgehobene Zeile Nr. führt mich zu diesem Code:

Code: Select all

 drawGraph() {
type EChartsOption = echarts.EChartsOption;
**var chartDom = document.getElementById('networkGraph')!;** // error
echarts.dispose(chartDom);
this.mychart = echarts.init(chartDom);
......
.....
}

Und wenn einige Daten vorhanden sind, erhalte ich diese Fehlermeldung-> FEHLER TypeError: Eigenschaften von undefiniert können nicht festgelegt werden (Einstellung 'dataIndex')
< img alt="Ich erhalte diese Fehlermeldung, wenn einige Daten vorhanden sind." src="https://i.sstatic.net/82IUmrbT.png" />
Ich verstehe nicht, warum dieser Fehler auftritt. Ich würde mich sehr freuen, wenn jemand helfen könnte.
Vom Server empfangene Daten:

Code: Select all

{
"headers": {
"normalizedNames": {},
"lazyUpdate": null,
"lazyInit": null,
"headers": {}
},
"status": 200,
"statusText": "OK",
"url": "http://ip:port/handler/?action=trafficVisualizationServiceData",
"ok": true,
"type": 4,
"body": {
"httpstatuscode": 200,
"AppData": {
"data": [],
"link": [],
"categories": [
{
"name": "CNF"
},
{
"name": "SCPE"
},
{
"name": "SCPI"
},
{
"name": "IPENDPOINT"
}
]
},
"opStatusCode": 2000,
"type": "SUCCESS",
"message": "DATA RECEIVED SUCCESSFULLY"
}
}

app.ts:

Code: Select all

  drawGraph() {
type EChartsOption = echarts.EChartsOption;
var chartDom = document.getElementById('networkGraph')!;
echarts.dispose(chartDom);
this.mychart = echarts.init(chartDom);

interface GraphNode {
symbolSize: number;
label?: {
show?: boolean;
};
}

this.mychart.showLoading();

(this.graph = {
nodes: this.nodes,
links: this.links,
categories: this.categories,
}),
this.mychart.hideLoading();
console.log('nodes : ' + JSON.stringify(this.graph.nodes));

let scpEgressThresholdTps = this.scpEgressThresholdTps;

// this.impactedProxyList.has("")
let impactedProxyListTemp: Set = this.impactedProxyList;

this.graph.nodes.forEach(function (node: any) {
if (node.category == 'IPENDPOINT') {
node.symbol = 'roundRect';
node.symbolSize = 17;

console.log('endpoint_kpi : ' + node.kpi);

if (node.kpi === undefined) {
node.itemStyle = {
color: 'white', // Background color
borderColor: '#818181', // Border color
borderWidth: 1, // Border width
};
} else {
node.itemStyle = {
color: 'white', // Background color
borderColor: '#FD5E5E',
borderWidth: 5, // Border width
};
}
} else if (node.category == 'SCPI') {
node.symbol = 'circle';
node.symbolSize = 20;

let isProxyImpacted: boolean = false;
Object.entries(impactedProxyListTemp).forEach(([key, value]) => {
console.log('key_value : ' + key, value);
if (value == node.proxyId) {
isProxyImpacted = true;
}
});

console.log('isProxyImpacted : ' + isProxyImpacted);
if (isProxyImpacted) {
console.error('this proxy is impacted.');
node.itemStyle = {
color: '#7EA6FF', // Background color
borderColor: '#FD5E5E', // Border color
borderWidth: 5, // Border width
};
} else if (node.value > scpEgressThresholdTps) {
node.itemStyle = {
color: '#7EA6FF', // Background color
borderColor: '#fee902', // Border color
borderWidth: 5, // Border width
};
} else {
node.itemStyle = {
color: '#7EA6FF', // Background color
borderWidth: 1, // Border width
};
}
} else if (node.category == 'SCPE') {
node.symbol = 'circle';
node.symbolSize = 20;

let isProxyImpacted: boolean = false;
Object.entries(impactedProxyListTemp).forEach(([key, value]) =>  {
console.log('key_value : ' + key, value);
if (value == node.proxyId) {
isProxyImpacted = true;
}
});

if (isProxyImpacted) {
console.error('this proxy is impacted.');
node.itemStyle = {
color: '#3188FF', // Background color
borderColor: '#FD5E5E', // Border color
borderWidth: 5, // Border width
};
} else if (node.value > scpEgressThresholdTps) {
node.itemStyle = {
color: '#3188FF', // Background color
borderColor: '#fee902', // Border color
borderWidth: 5, // Border width
};
} else {
node.itemStyle = {
color: '#3188FF', // Background color
borderWidth: 1, // Border width
};
}
} else if (node.category == 'CNF') {
node.symbol = 'roundRect';
node.symbolSize = 26;
node.itemStyle = {
color: '#00A1BE', // Background color
borderWidth: 1, // Border width
};
} else {
node.symbol = 'circle';
node.symbolSize = 13;
node.itemStyle = {
borderColor: '#5E42FA', // Border color
borderWidth: 1, // Border width
};
}
});

this.graph.links.forEach(function (link: any) {
console.log('isLinkImpacted : ' + link.isLinkImpacted);

if (link.isLinkImpacted === undefined) {
link.lineStyle = {
width: 2, // Set width of the line
type: 'solid', // Set type of the line to solid
color: 'green', // Set color of the line
};
} else {
link.lineStyle = {
width: 2, // Set width of the line
type: 'solid', // Set type of the line to solid
color: 'red', // Set color of the line
};
}
});

this.mychart.setOption(this.option);
this.option && this.mychart.setOption(this.option);

}

HTML:

Code: Select all

Data Not Available