使用 react js 使用 highcharts 动态添加数据

Question

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

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

 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 相关库。稍微清洁一下，现在它可以工作了。但是，我会坚持使用react-highcharts 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')
);