0
我很難過......「圖表數據」有效，但不是「圖表選項」。我必須在我的組件上使用.setState作爲選項嗎？無法讓react-chartjs選項生效
我也沒有看到任何完整的範例使用谷歌搜索（糾正我，如果我錯了）。我覺得我很難搞清楚「React」做事的方式......它必須簡單。我的代碼如下。對不起，它是多麼冗長。
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;
因爲它依賴於'FilterStore此代碼不能運行'。你可以重現一個樣本，也許在Codepen上，可以測試嗎？它只需要一些示例數據。 – Tyrsius
這是一個很好的建議Tysius，但我找到了解決方案。我必須擺脫我的chartOptions和charOptionsRadar變量上的「[」和「]」。我有[和]在那裏，因爲它適用於我的數據變量......我將在稍後發佈一個解決方案，這個問題在這個問題上有多痛苦！ – smuggledPancakes