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>

我的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()调用传入。该调用创建容器（将其放置在另一个容器中），然后传入两个道具。

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

如何将FlotJs集成到ReactJs中

1 个答案: