Невозможно получить ответную диаграмму для обновления

Question

Я пытаюсь следовать коду "Пример использования" на странице gitub response-chartjs

Я новичок в javascript и реагирую и, вероятно, просто наивный. Как я могу получить новые данные диаграммы из "_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 Tutorial.