我在 React 中实现 Dygraph 时遇到了很多麻烦(我使用的是 redux): http://dygraphs.com/ 。 NPM 上的 Dygraph 包装器包似乎不起作用。
我也不能简单地使用:
<div id="graph"></div>.
我相信这是因为在 react 你的工作状态而不是实际的 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)
如果有人能弄清楚发生了什么,甚至给我一个非常感激的提示。我特别想使用 dygraph 而不是谷歌图表或其他 react 图表(我已经很容易地工作了),但是,关于 React 中的 dygraph 实现的信息很少,我真的不明白为什么它不起作用。
最佳答案
问题是这一行:
new Dygraph('graphContainer', data, { ... })
尝试在 ID 为
graphContainer
的元素中创建 Dygraph。但是没有具有该 ID 的元素,因此失败。你需要等到 React 在 DOM 中创建一个 div 来创建 dygraph。您需要在
componentDidMount
中实例化 Dygraph: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 */
});
}
}
关于javascript - 在 React 中使用 Dygraph 和 redux?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44611061/