如何将 FlotJs 集成到 ReactJs

Question

我正在尝试将Flot图表集成到 React 中，但我得到$.plot的不是函数错误，我有以下代码

脚本标签 Index.html

<script src="dist/libs/js/jquery.min.js"></script>
<script src="dist/libs/js/jquery.flot.js"></script>
<script src="dist/libs/js/jquery.flot.stack.js"></script>
<script src="dist/libs/js/jquery.flot.symbol.js"></script>

我的反应组件

class OfferGraph extends React.Component {
  constructor(){
    super();
    this.state ={
      isLogged:false
    }

    //Test Code 
    let node = $('#trackInsightGraph');
    $.plot(node, [{
      data: data['searchAverage'],
      points: {show: false}
    }, {
      data: data['offer'],
      points: {show: false}
    }, {
      data: data['similar'],
      points: {show: false}
    }, {
      data: data['c01'],
      lines: {show: true}
    }], options);
  }

  render(){
    return <div id="trackInsightGraph">
    </div>
  }

}
export default OfferGraph;

我不能使用另一个 Chart 库，因为大多数功能是为Flot编写的如果有人可以指出一个例子，如何将这些（Flot）jQuery 插件集成到 React 中

Answer 1

您的代码的问题——给定的和未说明的但假定的——是在render()函数中创建图表容器 div 之前，将首先调用构造函数。并且构造函数需要那个容器 div。至少这是我根据给定的不完整代码猜测的。

我创建了一个 jsfiddle 来展示我将如何处理这个问题。我正在使用它React.createClass()来创建组件。在里面，renderChart()函数是实际的绘图代码，它使用ref在render()函数中创建的容器。

图表的数据和选项都通过ReactDOM.render()代码底部的 调用传入。该调用创建了容器（将其放置在另一个容器中），并在那时传入了两个道具。

（注意：我决定在这个例子中不使用 JSX。我将更改留给读者作为练习。）