react-chartjs图表呈现没有颜色

Question

我尝试使用react-chartjs（https://github.com/reactjs/react-chartjs）制作雷达图表。它呈现，但没有颜色。

我错过了什么？我几乎在https://reactcommunity.org/react-chartjs/index.html复制了大部分示例。 （我将数据简化为一个数据集。）

＆＃13;

＆＃13;

import React, {PropTypes} from 'react';
import {Grid} from 'react-bootstrap';
const {Radar} = require("react-chartjs");
const ReactDOM = require('react-dom');

function rand(min, max, num) {
	var rtn = [];
	while (rtn.length < num) {
		rtn.push((Math.random() * (max - min)) + min);
	}
	return rtn;
}

var chartData = {
	labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
	datasets: [
	{
		label: "My First dataset",
		backgroundColor: "rgba(179,181,198,0.2)",
		borderColor: "red",
		pointBackgroundColor: "rgba(179,181,198,1)",
		pointBorderColor: "#fff",
		pointHoverBackgroundColor: "#fff",
		pointHoverBorderColor: "rgba(179,181,198,1)",
		data: [65, 59, 90, 81, 56, 55, 40]
	}
	]
};

var chartOptions = {
	scale: {
		reverse: true,
		ticks: {
			beginAtZero: true
		}
	}
};

function TasteGraph({rating}) {
	//loop through and output one slider and one value per component
	return (
		<div>
		<Radar data={chartData} options={chartOptions}/>
		</div>
		);

}
TasteGraph.propTypes = {
	rating: PropTypes.array
};

TasteGraph.defaultProps = {
	rating: []
};

export default TasteGraph;

＆＃13;

＆＃13;

＆＃13;

似乎没有任何导入丢失或明显错误。我尝试用＆＃34; [＆＃34;＆＃34;围绕chartOptions和ChartData。和＆＃34;]＆＃34;基于另一个相关的SO问题。

Answer 1

将backgroundColor替换为fillColor。您的borderColor也应该替换为strokeColor。

请参阅此jsfiddle。 （它使用没有反应包装的chart.js - 但是你的属性给出了截图中的相同输出）