Cannot get react-chartjs options to take effect

Question

I am stumped... the "chart data" works, but not the "chart options". Do I have to use .setState on my component for the options?

I also did not see any complete exemplars by googling (correct me if I am wrong). I think I am just have trouble figuring out the "React" way of doing things... it has to be simple. My code is below. Sorry about how verbose it is.

  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>"

  }

];

var chartOptionsRadarInit = [
  {
      //Boolean - Whether to show lines for each scale point
      scaleShowLine : true,

      //Boolean - Whether we show the angle lines out of the radar
      angleShowLineOut : true,

      //Boolean - Whether to show labels on the scale
      scaleShowLabels : false,

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

      //String - Colour of the scale line
        scaleLineColor : "rgba(0,0,255,1)",

      //String - Colour of the angle line
      angleLineColor : "rgba(255,0,0,1)",

      //Number - Pixel width of the angle line
      angleLineWidth : 1,

      //String - Point label font declaration
      pointLabelFontFamily : "'Arial'",

      //String - Point label font weight
      pointLabelFontStyle : "normal",

      //Number - Point label font size in pixels
      pointLabelFontSize : 10,

      //String - Point label font colour
      pointLabelFontColor : "#666",

      //Boolean - Whether to show a dot for each point
      pointDot : true,

      //Number - Radius of each point dot in pixels
      pointDotRadius : 3,

      //Number - Pixel width of point dot stroke
      pointDotStrokeWidth : 1,

      //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
      pointHitDetectionRadius : 20,

      //Boolean - Whether to show a stroke for datasets
      datasetStroke : true,

      //Number - Pixel width of dataset stroke
      datasetStrokeWidth : 2,

      //Boolean - Whether to fill the dataset with a colour
      datasetFill : true,

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

  }
];

var chartDataRadar = {
    labels: ["QB", "RB", "WE/TE"],
    datasets: [
        {
            label: "NFL Chart",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 90]
        }
    ]
};

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 PolarPlot = React.createClass ({
  componentWillMount: function () {
      //console.log("this.state: " + JSON.stringify(AppStore.getAll()))
      FilterStore.addChangeListener  (this._onChange);
      this.setState
      ({
        chartData: chartData,
        chartDataRadar: chartDataRadar,
        chartOptions: chartOptions,
        chartOptionsRadar: chartOptionsRadarInit
      });
  },

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

    var filterBuild = FilterStore.getAll().build;

    var jsonToSend = {};
    jsonToSend["filterBuild"] = filterBuild;
    jsonToSend["population"] = "NFL";
    console.log("jsonToSend: " + JSON.stringify(jsonToSend));


    var that = this;

    $.post("polarPlot/polarPlotData", jsonToSend, function(data, status){
        // alert("Data: " +  JSON.stringify(data) + "\nStatus: " + status);

        console.log("QB");
        console.log(JSON.stringify(data));

        that.setState ({
          chartData: chartData = [
              {
                  value: data.QB,
                  color:"#F74A46",
                  highlight: "#FF5E5A",
                  label: "QB"
              },
              {
                  value: data.RB,
                  color:"#F7464A",
                  highlight: "#FF5A5E",
                  label: "RB"
              },
              {
                  value: data.WRTE,
                  color:"#46F74A",
                  highlight: "#5AFF5E",
                  label: "WR/TE"
              }],

              chartDataRadar: chartDataRadar = {
                  labels: ["QB", "RB", "WE/TE"],
                  datasets: [
                      {
                          label: "NFL Chart",
                          fillColor: "rgba(220,220,220,0.2)",
                          strokeColor: "rgba(220,220,220,1)",
                          pointColor: "rgba(220,220,220,1)",
                          pointStrokeColor: "#fff",
                          pointHighlightFill: "#fff",
                          pointHighlightStroke: "rgba(220,220,220,1)",
                          data: [data.QB, data.RB, data.WRTE]
                      }
                  ]
              }
        });

    }, "json");
  },

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

module.exports = PolarPlot;

Answer 1

摆脱掉“ chartOptions”和“ chartOptionsRadarInit”变量的“ [”和“]”，然后它就可以简单地工作了：/