javascript - 无法让 react-chartjs 更新

Question

我正在尝试遵循 react-chartjs github page 中的“示例用法”代码

我是 javascript 的新手， react 迟钝，可能只是天真。如何从“_onChange”获取新的图表数据来更新我的 PolarAreaChart？我通过调用 element.getDocumentById("polarChart") 尝试了一些更直接的方法，但是它什么都不返回，然后我不能在它上面调用 .update ...整个“在 xml 中插入重绘”并且它会神奇地调用更新似乎很神奇我:(

PolarPlot.jsx

var React = require ('react');
var PolarAreaChart = require ('react-chartjs').PolarArea;
var FilterStore = require ('FilterStore')

var PolarPlot = React.createClass ({
  componentWillMount: function () {
      FilterStore.addChangeListener  (this._onChange);
  },

  _onChange: function () {
    console.log("time to update")

    chartData = [
        {
            value: 300,
            color:"#F7464A",
            highlight: "#FF5A5E",
            label: "Red"
        }]
  },

  render: function () {
    return (
      <PolarAreaChart id="polarChart" data={chartData} options={chartOptions} redraw/>
    );
  }
});

var chartData = [
    {
        value: 300,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
    },
    {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green"
    },
    {
        value: 100,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Yellow"
    },
    {
        value: 40,
        color: "#949FB1",
        highlight: "#A8B3C5",
        label: "Grey"
    },
    {
        value: 120,
        color: "#4D5360",
        highlight: "#616774",
        label: "Dark Grey"
    }

];

var chartOptions = [
  {
      //Boolean - Show a backdrop to the scale label
      scaleShowLabelBackdrop : true,

      //String - The colour of the label backdrop
      scaleBackdropColor : "rgba(255,255,255,0.75)",

      // Boolean - Whether the scale should begin at zero
      scaleBeginAtZero : true,

      //Number - The backdrop padding above & below the label in pixels
      scaleBackdropPaddingY : 2,

      //Number - The backdrop padding to the side of the label in pixels
      scaleBackdropPaddingX : 2,

      //Boolean - Show line for each value in the scale
      scaleShowLine : true,

      //Boolean - Stroke a line around each segment in the chart
      segmentShowStroke : true,

      //String - The colour of the stroke on each segement.
      segmentStrokeColor : "#fff",

      //Number - The width of the stroke value in pixels
      segmentStrokeWidth : 2,

      //Number - Amount of animation steps
      animationSteps : 100,

      //String - Animation easing effect.
      animationEasing : "easeOutBounce",

      //Boolean - Whether to animate the rotation of the chart
      animateRotate : true,

      //Boolean - Whether to animate scaling the chart from the centre
      animateScale : false,

      //String - A legend template
      legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"

  }

];

module.exports = PolarPlot;

Answer 1

除非您明确更改状态，否则您的 PolarPlot 组件不会呈现。您的 chartData 不是组件状态的一部分。因此，为该变量分配一个新数组仅此而已。 将此chartData 移动到组件状态。然后，无论何时更新此状态变量，您都将强制重新渲染。像这样:

var PolarPlot = React.createClass ({
  componentWillMount: function () {
      FilterStore.addChangeListener  (this._onChange);
  },

  getInitialState: function() {
    return {chartData: chartData};
  },

  _onChange: function () {
    console.log("time to update")
    this.setState({
      chartData: [{
        value: 300,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
      }]
    });
  },

  render: function () {
    return (
      <PolarAreaChart id="polarChart" data={this.state.chartData} options={chartOptions} redraw/>
    );
  }
});

如果您想了解更多关于组件渲染如何对状态变化使用react的信息，请查看 Reactive state来自 React 教程的部分。