Как визуализировать 100 узлов с графиком сети Highcharts? - PullRequest
0 голосов
/ 22 июня 2019

Как я могу эффективно визуализировать сетевой график 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 узлов далеко за пределами возможностей сетевого графа или есть способ оптимизации?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...