HighCharts Live Data с использованием mqtt - PullRequest
Новая
       38

HighCharts Live Data с использованием mqtt

0 голосов
/ 28 апреля 2018

Я пытаюсь подготовить график в реальном времени, используя реакционные и высокие графики. Я использую 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>
                    );
                }
            }

1 Ответ

0 голосов
/ 28 апреля 2018

check 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 demo

...