Question

中的“示例用法”代码

我是javascript的新手并做出反应，可能只是天真。如何从“_onChange”获取新的chartData来更新我的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

除非您明确更改状态，否则不会呈现您的Meteor.publish('page', function(code) { return Pages.find({code: code}) });组件。您的PolarPlot不属于组件状态。因此，为该变量分配一个新数组只会做到这一点。 将此chartData移动到组件状态。然后，每当您更新此状态变量时，您将强制重新渲染。像这样：

chartData

如果您想了解有关组件呈现如何对状态更改做出反应的更多信息，请参阅React Tutorial中的Reactive state部分。

无法获得react-chartjs进行更新

1 个答案: