reactjs - 带有 React 和 Boost 的 Highcharts/Highstock 无法正常工作（CPU 使用率非常高）

Question

我正在实现这个示例http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/samples/highcharts/boost/line-series-heavy-dynamic/但使用 React。

import React from 'react'
import Highcharts from 'highcharts'
import HighchartsBoost from 'highcharts/modules/boost'
HighchartsBoost(Highcharts)

Highcharts.setOptions({
    global: {
        useUTC: false
    }
});

class Plot extends React.Component {
  constructor(props) {
    super(props)

    this.n = 20
    this.s = 600
    this.addPoint = this.addPoint.bind(this)
  }

  componentDidMount() {
    var series = getSeries(this.n, this.s)

    console.time('line');
    this.chart = Highcharts.chart('hc-container', {
        boost: {
          enabled: true,
          seriesThreshold: 1
        },
        chart: {
            animation: false,
            zoomType: 'x'
        },
        title: {
            text: 'Highcharts drawing ' + (this.n * this.s) + ' points across ' + this.s + ' series'
        },
        navigator: {
            xAxis: {
                ordinal: false//,
            },
            yAxis: {
            },
            series: {
                color: null
            }
        },
        legend: {
            enabled: false
        },
        xAxis: {
            ordinal: false
        },
        yAxis: {
        },
        subtitle: {
            text: 'Using the Boost module'
        },
        tooltip: {
            valueDecimals: 2,
            shared: false
        },
        series: series
    });
    console.timeEnd('line');

    setInterval(this.addPoint, 1000);
  }

  addPoint() {
    ++this.n;

    if (!this.chart.series) return 

    this.chart.series.forEach(se => {
        var x = this.n
        var y = 2 * Math.sin(x / 100) + Math.random()

        //Yeah...
        if (se.options.className === "highcharts-navigator-series") {
            return;
        }

        se.addPoint([x, y], false, true, false);
        // se.options.data.push([x, y]);
        // se.options.data.shift();
        // se.isDirty = true;
        // se.isDirtyData = true;
    });

    this.chart.redraw();

  }

  render() {
    return <div id='hc-container' />
  }
}

export default Plot

function getData(n) {
    var arr = [],
        i;
    for (i = 0; i < n; i = i + 1) {
        arr.push([
            i,
            2 * Math.sin(i / 100) + Math.random()
        ]);
    }
    return arr;
}

function getSeries(n, s) {
    var i = 0,
        r = [];

    for (; i < s; i++) {
        r.push({
            data: getData(n),
            animation: false,
            lineWidth: 2,
            boostThreshold: 1,
            turboThreshold: 1,
            showInNavigator: true,
            requireSorting: false
        });
    }

    return r;
}

我不认为 boost 模块是这样工作的，因为 CPU 非常非常高。我他们的示例（在 chrome 中运行）CPU 大约为 0.x 但在我的实现中，它大部分时间都达到 120。

标签： reactjshighchartshighcharts-boost