Question

如何有效渲染具有500个节点的Highcharts网络图？该图形需要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个节点超出了网络图的功能范围还是有优化的方法？

如何用Highcharts网络图渲染100个节点？

0 个答案: