javascript - 如何将 FlotJs 集成到 ReactJs 中

Question

我正在尝试整合 Flot图表进入 React 但我得到 $.plot is not a function error，我有以下代码

脚本标签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>

我的 React 组件

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;

我不能使用另一个图表库，因为大多数功能都是为 Flot 编写的请帮助，如果有人可以指出这些(Flot)jQuery 插件如何集成到 React 中的示例

Answer 1

您的代码的问题 - 给定的和未说明但假定的 - 是在 render() 中创建图表容器 div 之前首先调用构造函数功能。构造函数需要那个容器 div。至少那是我基于给出的不完整代码的猜测。

我创建了一个显示 how I would approach the issue 的 jsfiddle .我正在使用 React.createClass() 来创建组件。在其中，renderChart() 函数是实际的绘图代码，它使用 ref 作为在 render() 中创建的容器功能。

图表的数据和选项都是通过调用代码底部的 ReactDOM.render() 传入的。该调用会创建容器(将其放入另一个容器中)，并在此时传入两个 Prop 。

(注意:我决定在此示例中不使用 JSX。我将更改作为练习留给读者。)