使用mqtt

Question

我正在尝试使用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>
                );
            }
            }

HighChart组件代码：

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

Answer 1

检查accessing-highcharts-api-after-render并使用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);

  }

stackblitz演示