我很难过...＆＃34;图表数据＆＃34;有效，但不是＆＃34;图表选项＆＃34;。我必须在我的组件上使用.setState作为选项吗？
我也没有通过谷歌搜索看到任何完整的样本（如果我错了，请纠正我）。我想我很难搞清楚＆＃34; React＆＃34;做事方式......必须简单。我的代码如下。对不起它有多详细。
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;
答案 0 :(得分：1)
删除“chartOptions”和“chartOptionsRadarInit”变量的“[”和“]”，然后它就可以了：/