如何将 FlotJs 集成到 ReactJs 中

Question

我正在尝试将 Flot 图表集成到 React 中，但我得到 $.plot is not a function 错误，我有以下代码

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

您的代码的问题——给定的和未说明但假定的——是在 [=10= 中创建图表容器 div 之前首先调用构造函数] 功能。构造函数需要那个容器 div。至少那是我根据给出的不完整代码猜测的。

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

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

（注意：我决定不在此示例中使用 JSX。我将更改留作 reader 的练习。）

如何将 FlotJs 集成到 ReactJs 中

How to integrate FlotJs into ReactJs

javascript

jquery

flot

reactjs