Question

所以我正在尝试制作一个图表，使用高图表，可以处理信息流，现在我正在尝试使用随机值，但它不能按预期工作，因为我得到了错误：{{1 }} 并且错误引用了highcharts.js文件而不是当前文件，这是我的highcharts安装的问题还是我在这里做错了什么？

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

"TypeError: this.options is undefined"

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')
);

使用reactjs使用highcharts动态添加数据

1 个答案: