Highcharts windbarb内存不足崩溃

Question

我正在尝试在react项目中使用windbarb模块。在渲染时，chrome通过在windbarb.js文件中的第135行突出显示“在潜在的内存不足崩溃之前暂停”来暂停该过程。

这是我的代码：

import React, { Component } from 'react';

import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'
import WindBarbs from 'highcharts/modules/windbarb'

WindBarbs(Highcharts)

class Test extends Component {
    constructor(props) {
        super(props)
        this.state = {
            lineData: [
                [1569243600000, 12.5],
                [1569247200000, 12.2]
            ],
            windData: [
                [1569243600000, 29.6],
                [1569247200000, 26.5]
            ],
            highcharts: Highcharts
        }
    }
    render(){
        let options = {
            series: [{
                name: 'Temperature',
                type: 'line',
                data: this.state.lineData
            }, {
                name: 'Wind direction',
                type: 'windbarb',
                data: this.state.windData
            }]
        }
        return(
            <HighchartsReact
                highcharts={this.state.highcharts}
                options={options}
            />
        )
    }
}

export default Test

Answer 1

该问题与您的数据有关。默认情况下，数据数组中的第一个元素用作values系列的windbard，这会导致非常复杂的svg渲染。作为解决方案，您可以使用keys选项。

series: [{
    type: 'line',
    data: [
        [1569243600000, 12.5],
        [1569247200000, 12.2]
    ]
}, {
    type: 'windbarb',
    keys: ['x', 'value'],
    data: [
        [1569243600000, 29.6],
        [1569247200000, 26.5]
    ]
}]

---

实时演示： https://jsfiddle.net/BlackLabel/0k8vmzfd/

API参考：

https://api.highcharts.com/highcharts/series.windbarb.data

https://api.highcharts.com/highcharts/series.windbarb.keys