Question

我试图让Chart.js与React.js合作并且我已经关闭了。

我有React渲染正确的图形，当我改变状态时，新图表被绘制在另一个图形的上方。问题是悬停事件明显留在canvas上，将鼠标移到它上面会闪现之前制作的所有图形版本。

据我所知，这是Chart.js中的一个错误，，解决方案是删除canvas元素并将其替换为新的canvas元素。

所以我有这个代码，它在页面上得到图表：

var LineChart = React.createClass({
  render: function() {
    return (
      <div id="lineHolder" className="graphHolder">
        <h2 className="sectionHeader">Earnings per day</h2>
        <canvas id="lineChart" width="688" height="286"></canvas>
      </div>
    );
  },
  ctx: {},
  lineChart: {},
  componentDidMount: function() {
    this.drawChart();
  },
  componentDidUpdate: function() {
    this.drawChart();
  },
  drawChart: function() {
    var lineData = {
      labels: this.props.dates,
      datasets: [{
        label: "Earnings",
        fillColor: "rgba(151,187,205,0.2)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: this.props.earnings,
      }]
    }
    this.ctx = document.getElementById("lineChart").getContext("2d");
    this.lineChart = new Chart(this.ctx).Line(lineData);
  }
});

但我无法想到＆＃34;反应方式＆＃34;每次需要重绘时删除和替换该canvas元素。

有什么想法吗？

Answer 1

在React中，您希望每次更改道具或状态时更改视图。如果您正在使用DOM操作库，例如Chart.js，那么这就是React生命周期方法派上用场的地方。

https://facebook.github.io/react/docs/component-specs.html

您可以使用componentWillUpdate或componentDidUpdate（取决于哪些适合）将下一个状态与之前的状态进行比较。

componentWillUpdate(nextProps, nextState) {
    /* Optionally include logic comparing nextProps or nextState
     * to this.props or this.state
     */
    this.lineChart.clear();
}

确保它的道具/状态更改可以驱动图表中的更改。

我对这个明显的Chart.js错误了解不多。但是如果你每次都需要重新渲染canvas元素，我建议在canvas元素上放置一个key属性。

<canvas key={this.uniqueKey()} id="lineChart" width="688" height="286"></canvas>

很难说this.uniqueKey()很难说。但每当道具或国家改变时，它需要不同。如果Chart#clear()（或可能Chart#destroy()）之类的简单方法失败，那么只能采用此方法。

Answer 2

试试这个 -

var LineChart = React.createClass({
  render: function() {
    return (
      <div id="lineHolder" className="graphHolder">
        <h2 className="sectionHeader">Earnings per day</h2>
        <canvas ref="lineChart" key={this.state.canvasUpdateToggle} width="688" height="286"></canvas>
      </div>
    );
  },
  ctx: {},
  lineChart: {},
  getInitialState:function(){
    return {canvasUpdateToggle:"0"};
  },
  componentDidMount: function() {
    this.drawChart();
  },
  componentDidUpdate: function() {
    this.drawChart();
  },
  componentWillReceiveProps:function(){
    var canvasUpdateToggle = this.state.canvasUpdateToggle == 0? 1: 0;
    this.setState({"canvasUpdateToggle":canvasUpdateToggle});
  },
  drawChart: function() {
    var lineData = {
      labels: this.props.dates,
      datasets: [{
        label: "Earnings",
        fillColor: "rgba(151,187,205,0.2)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: this.props.earnings,
      }]
    }
    this.ctx = this.refs.lineChart.getContext("2d");
    this.lineChart = new Chart(this.ctx).Line(lineData);
  }
});

使用React删除和重新创建元素

2 个答案: