使用 reactjs 使用高图表动态添加数据

Question

所以我正在尝试使用Highcharts制作一个可以处理信息流的图表，现在我正在尝试使用随机值，但它没有按预期工作，因为我收到错误："TypeError: this.options is undefined"并且错误是指高图表.js文件而不是当前文件，那么是我的高图表安装有问题还是我在这里做错了什么？

如果有人有任何线索，这是完整的代码，谢谢！`

 import React from 'react';
 import { withHighcharts, HighchartsStockChart, Chart} from 'react-jsx-highstock';
  import Highcharts from 'highcharts/highstock';
class Charts extends React.Component{
ReactHighcharts = require('react-highcharts');
componentDidMount(props) {
Highcharts.chart('container', {
 chart: {
    events: {
        load: function () {
           var series = this.series[0];
           var x = (new Date()).getTime(), // current time
                  y = Math.round(Math.random() * 100);
           setInterval(function () {
             console.log("Y : " ,y);
                 series.addPoint([x, y], true, true);
             }, 1000);
        }
    }
},
 title: {
   text: 'BPM Chart'
 },
 scrollbar: {
   enabled: false
 },
 rangeSelector: {
   selected: 1
 },
 exporting: {
        enabled: false
    },
    series: [{
    name: 'Random data',
    data: (function () {
        // generate an array of random data
        var data = [],
            time = (new Date()).getTime(),
            i;
        for (i = -9; i <= 0; i += 1) {
            data.push([
                time + i * 1000,
                Math.round(Math.random() * 100)
            ]);
        }
        return data;
    }())
}]
});
}
render() {
return (
 <div>
   <div id="container" onLoad="componentDidMount()">loading </div>
 </div>
  )
  }
  }
  export default Charts;

Answer 1

我删除了ReactHighcharts = require('react-highcharts');，因为您混合了几个highchart相关的库。 稍微清洁一下，现在它可以工作了。但是，我会坚持使用反应高图表npm。

这是一个工作示例：

import React from 'react';
import ReactDOM from 'react-dom';
import Highcharts from 'highcharts/highstock';
class Charts extends React.Component{
    componentDidMount(props) {
        Highcharts.chart('container', {
            chart: {
                events: {
                    load: function () {
                        var series = this.series[0];
                        var x = (new Date()).getTime(), // current time
                            y = Math.round(Math.random() * 100);
                        setInterval(function () {
                            console.log("Y : " ,y);
                            series.addPoint([x, y], true, true);
                        }, 1000);
                    }
                }
            },
            title: {
                text: 'BPM Chart'
            },
            scrollbar: {
                enabled: false
            },
            rangeSelector: {
                selected: 1
            },
            exporting: {
                enabled: false
            },
            series: [{
                name: 'Random data',
                data: (function () {
                    // generate an array of random data
                    var data = [],
                        time = (new Date()).getTime(),
                        i;
                    for (i = -9; i <= 0; i += 1) {
                        data.push([
                            time + i * 1000,
                            Math.round(Math.random() * 100)
                        ]);
                    }
                    return data;
                }())
            }]
        });
    }
    render() {
        return (
            <div>
                <div id="container">loading </div>
            </div>
        )
    }
}

ReactDOM.render(
    <Charts></Charts>
    , document.getElementById('root')
);

这是另一个使用 react-highcharts npm

import React from 'react';
import ReactDOM from 'react-dom';
import ReactHighcharts from 'react-highcharts'
var conf =  {
    chart: {
        events: {
            load: function () {
                var series = this.series[0];
                var x = (new Date()).getTime(), // current time
                    y = Math.round(Math.random() * 100);
                setInterval(function () {
                    console.log("Y : " ,y);
                    series.addPoint([x, y], true, true);
                }, 1000);
            }
        }
    },
    title: {
        text: 'BPM Chart'
    },
    scrollbar: {
        enabled: false
    },
    rangeSelector: {
        selected: 1
    },
    exporting: {
        enabled: false
    },
    series: [{
        name: 'Random data',
        data: (function () {
            // generate an array of random data
            var data = [],
                time = (new Date()).getTime(),
                i;
            for (i = -9; i <= 0; i += 1) {
                data.push([
                    time + i * 1000,
                    Math.round(Math.random() * 100)
                ]);
            }
            return data;
        }())
    }]
};

ReactDOM.render(
    <ReactHighcharts config = {conf}></ReactHighcharts>
    ,document.getElementById('root')
);