Redex로 반응할 때 Dygraph 사용?

Redex로 반응할 때 Dygraph 사용?

나는 리액션에서 Dygraph를 구현하는 데 많은 어려움을 겪고 있다. http://dygraphs.com/NPM의 Dygraph 포장지 패키지가 작동하지 않는 것 같다.

또한 나는 단순히 다음을 사용할 수 없다.

<div id="graph"></div>. 

나는 이것이 당신이 실제 index.html 파일이 아닌 상태에서 작업하는 것에 반응하기 때문이다.

그래서 내가 현재 사용하려는 방법은 그래프 구성요소를 만드는 것이다.

import React, { Component } from 'react';
import Dygraph from 'dygraphs';
import myData from '../../mockdata/sample-data.json';
import 'dygraphs/dist/dygraph.min.css'
import './graphComponent.css';

class DyGraph extends Component {

    constructor(props) {
        super(props);
        // mock json data for graph
        const messages = myData;

        var data = "";
        messages.forEach((response) => {
            data += response[0] + ',' + response[1] + "\n";
        });

        new Dygraph('graphContainer', data, {
            title: 'Pressure Transient(s)',
            titleHeight: 32,
            ylabel: 'Pressure (meters)',
            xlabel: 'Time',
            gridLineWidth: '0.1',
            width: 700,
            height: 300,
            connectSeparatedPoints: true,
            axes: { "x": { "axisLabelFontSize": 9 }, "y": { "axisLabelFontSize": 9 } },
            labels: ['Date', 'Tampines Ave10 (Stn 40)'],

        });
    }

    render() {
        return <div></div>
    }
}
export default DyGraph;

다음 항목으로 가져오기:

import React, { Component } from 'react';
import DyGraph from './components/graph/graphComponent';
import './App.css';
class DeviceDetails extends Component {

    render() {
        return (
                <div >
                    <DyGraph />
                </div> 
        ); 
    }
}
export default DeviceDetails;

그리고 어떤 것을 클릭하면 다음과 같이 표시되는 상태가 있다.

import React, { PropTypes } from 'react'
import { connect } from 'react-redux'

import WarningView from '../warning/warningView'
import DirectoryView from '../directory/directoryView'
import DeviceDetailView from '../devicedetails/devicedetails'


export const Display = ({ currentPage }) => {

    switch(currentPage) {
        case 'WARNING_PAGE':
            return <WarningView/>;
        case 'DIRECTORY_PAGE':
            return <DirectoryView/>;
        case 'SENSOR_PAGE':
            return <DeviceDetailView/>;
        default:
            return <WarningView/>;
    }
};

Display.propTypes = {
    currentPage: PropTypes.string.isRequired,
};

export default connect(
    (state) => ({ currentPage: state.currentPage }),
    (dispatch) => ({ })
)(Display)

이 그래프를 로컬로 빌드하고 실행하면 콘솔에 오류가 표시됨:

Uncaught (in promise) Error: Constructing dygraph with a non-existent div!
    at Dygraph.__init__ (dygraph.js:217)
    at new Dygraph (dygraph.js:162)
    at new DyGraph (graphComponent.js:19)
    at ReactCompositeComponent.js:295
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:294)
    at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:280)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:188)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:238)

무슨 일이 일어나고 있는지 알아낼 수 있는 사람이 있다면, 아니면 나에게 SOOO 감사할 힌트를 줄 수 있다면.특히 구글 차트나 다른 리액션 차트 대신 다이그래프를 사용하고 싶지만 리액션에서는 다이그래프 구현에 대한 정보가 거의 없고 왜 작동하지 않는지 잘 모르겠다.

문제는 이 대목은 다음과 같다.

new Dygraph('graphContainer', data, { ... })

ID를 사용하여 요소에 Dygraph 생성 시도graphContainer그러나 그 ID를 가진 요소는 없고, 따라서 실패한다.

Ract가 DOM에 div를 만들 때까지 기다려야 다이어그래프를 만들 수 있다.당신은 Dygraph를 인스턴스화하고 싶을 것이다.componentDidMount:

class Dygraph extends Component {
    render() {
        return <div ref="chart"></div>;
    }


    componentDidMount() {
        const messages = myData;

        var data = "";
        messages.forEach((response) => {
            data += response[0] + ',' + response[1] + "\n";
        });

        new Dygraph(this.refs.chart, data, {
            /* options */
        });
    }
}

참조URL: https://stackoverflow.com/questions/44611061/using-dygraph-in-react-with-redux