Reactjs 使用mqtt的HighCharts实时数据

我正在尝试使用react和highcharts准备实时图表。我正在使用

react mqtt

检索实时数据，并将数据作为道具传递给Highchart组件

图表正在呈现，但每次数据出现时，它都会重新呈现组件

我的期望是，它应该像心跳图一样流动。但是多线心跳

主页：

            import React from 'react';
            import { Helmet } from 'react-helmet';
            import { FormattedMessage } from 'react-intl';
            import { connect } from 'react-redux';
            import { compose } from 'redux';
            import { createStructuredSelector } from 'reselect';

            import Chart from 'components/HighCharts';

            import { Connector } from 'mqtt-react';
            import {subscribe} from 'mqtt-react';

            const MessageContainer = subscribe({topic: 'system_monitor'})(Chart);

            export class HomePage extends React.PureComponent {

            render() {
                return (
                <article>
                    <Helmet>
                    <title>Home Page</title>
                    <meta name="description" content="A React.js Boilerplate application homepage" />
                    </Helmet>
                    <div>
                    <Connector mqttProps="ws://localhost:1884/">
                    <MessageContainer/>
                    </Connector>
                    </div>
                </article>
                );
            }
            }

从“React”导入React；
从“react Helmet”导入{Helmet}；
从“react intl”导入{FormattedMessage}；
从'react redux'导入{connect}；
从'redux'导入{compose}；
从“重新选择”导入{createStructuredSelector}；
从“组件/高图表”导入图表；
从“mqtt react”导入{Connector}；
从“mqtt react”导入{subscribe}；
const MessageContainer=subscribe（{topic:'system_monitor'}）（图表）；
导出类主页扩展了React.PureComponent{
render（）{
返回(
主页
);
}
}

海图组件代码：

            import React, { Component } from 'react';
            import HighCharts from 'react-highcharts';

            export default class SplineChart extends Component {

                constructor(props) {
                    super(props);
                    this.config = {
                        chart: {
                            type: 'spline',
                            animation: HighCharts.svg,
                            marginRight: 10,
                            width: 700,
                            height: 360,
                        },
                        title: {
                            text: 'RFID Chart'
                        },
                        legend: {
                            enabled: true
                        },
                        exporting: {
                            enabled: false
                        },
                        xAxis: {
                            type: 'datetime',
                            dateTimeLabelFormats: {
                                hour: '%I',
                                minute: '%I:%M',
                                seconds: '%I:%M:%S'
                            },
                            title: {
                                text: 'Time'
                            }
                        },
                        yAxis: {
                            title: {
                                text: 'Heart Beat'
                            }
                        },
                        series: this.props.data
                    }
                }

                render() {
                    console.log(this.props.data)
                    return (
                        <div>
                            <HighCharts config={this.config}></HighCharts>
                        </div>
                    );
                }
            }

import React，{Component}来自'React'；
从“react HighCharts”导入HighCharts；
导出默认类SplineChart扩展组件{
建造师（道具）{
超级（道具）；
this.config={
图表：{
类型：“样条线”，
动画：HighCharts.svg，
marginRight:10，
宽度：700，
身高：360，
},
标题：{
文本：“RFID图表”
},
图例：{
已启用：true
},
出口：{
已启用：false
},
xAxis：{
键入：“日期时间”，
日期时间标签格式：{
小时：'%I'，
分钟：'%I:%M'，
秒数：“%I:%M:%S”
},
标题：{
文字：“时间”
}
},
亚克斯：{
标题：{
文字：“心跳”
}
},
系列：this.props.data
}
}
render（）{
console.log（this.props.data）
返回(
);
}
}

检查并使用

addPoint（）

动态添加点

  componentDidMount() {
    let chart = this.refs.chart.getChart();
    //chart.series[0].addPoint({x: 10, y: 12});

    //below is for demo    
    // set up the updating of the chart each second
    var series = chart.series[0];
    setInterval(function () {
      var x = (new Date()).getTime(), // current time
        y = Math.random();
      series.addPoint([x, y], true, true);
    }, 1000);

  }

---

演示

请发布您的代码。改进了格式。添加了代码@ColinSample data from my local mqtt server:x值为TimeStamp，y数据点[{“data”：[[1524903290174,50]，[1524903295176,55]，[152490330182,0]，[1524903305185,5]}。数据每秒都会出现。但是，您上面给出的内容对我没有用处，因为我需要从mqtt

chart.series[0].addPoint（{x:10，y:12}）传递数据意味着
addPoint
是一种更新图表的方法，无需重新加载可在mqtt中使用的图表，但当我在highchart组件中接收数据时，它会重新呈现。我在索引中调用mqtt并将数据传递给图表组件，它会重新呈现整个组件吗？如果是，我在哪里可以订阅mqtt？我已经更新了shouldComponentUpdate中的状态并将return设置为false，以便停止重新渲染。希望它能解决我的问题。谢谢你的建议。