Как я могу эффективно визуализировать сетевой график Highcharts с 500 узлами?Загрузка графика занимает 10 секунд, и при изменении данных диаграмма вылетает с таким сообщением:
Uncaught TypeError: linkFrom.destroyElements is not a function
at eval (networkgraph.src.js?e984:2982)
at Array.forEach (<anonymous>)
at q.destroy (networkgraph.src.js?e984:2980)
at q.destroy (highcharts.js?ea7f:342)
at q.destroy (sankey.js?56e0:14)
at e (highcharts.js?ea7f:376)
at q.remove (highcharts.js?ea7f:376)
at q.update (highcharts.js?ea7f:378)
at eval (highcharts.js?ea7f:371)
at Array.forEach (<anonymous>)
Кроме того, я вижу много сообщений о нарушениях от React и Highcharts:
[Violation] 'readystatechange' handler took 13810ms
[Violation] Forced reflow while executing JavaScript took 486ms
Конфигурация сетевого графика выглядит следующим образом:
import React from 'react'
import Highcharts from 'highcharts'
import addNetworkGraph from 'highcharts/modules/networkgraph.src'
import HighchartsReact from 'highcharts-react-official'
addNetworkGraph(Highcharts)
const Network = ({ title, series, height }) => {
const options = {
chart: {
type: 'networkgraph',
},
title: {
text: ''
},
plotOptions: {
networkgraph: {
keys: ['from', 'to'],
layoutAlgorithm: {
enableSimulation: false,
approximation: 'barnes-hut',
}
}
},
series: [{
data: series
}]
}
return (
<div className="chart-container">
<HighchartsReact highcharts={Highcharts} options={options} />
</div>)
}
export default Network
Я пробовал приближение barnes-hut
, но заметного прироста производительности нет.500 узлов далеко за пределами возможностей сетевого графа или есть способ оптимизации?