使用Dygraph與Rex進行反應？

我在React中使用Dygraph有很多麻煩（我正在使用redux）：http://dygraphs.com/。 NPM上的Dygraph包裝程序包似乎不起作用。使用Dygraph與Rex進行反應？

我也不能簡單地用：

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

當我在本地構建和運行這個時，我在CONSOL中得到一個錯誤E（當我嘗試看看圖）：

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欣賞的提示。我特別想使用dygraph而不是谷歌圖表或其他反應圖表（我已經非常輕鬆地工作），但是，關於在React中實施dygraph的信息很少，我不明白爲什麼它不起作用。

來源

2017-06-18 foerever

的問題是，這條線：

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

試圖在元件創建Dygraph與ID graphContainer。但是這個ID沒有元素，因此失敗了。

您需要等到React在DOM中創建一個div來創建dygraph。你會想實例化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 */ 
     }); 
    } 
}

來源

2017-06-18 15:30:01 danvk

使用Dygraph與Rex進行反應？

回答

相關問題