javascript – react-chartjs图表呈现没有颜色

前端之家收集整理的这篇文章主要介绍了javascript – react-chartjs图表呈现没有颜色前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我已经尝试使用react-chartjs制作雷达图表(https://github.com/reactjs/react-chartjs).它呈现,但没有颜色.

enter image description here

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

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,1)",pointBorderColor: "#fff",pointHoverBackgroundColor: "#fff",pointHoverBorderColor: "rgba(179,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 (
		

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

最佳答案
用fillColor替换backgroundColor.你的borderColor也应该用strokeColor替换.
请参阅此jsfiddle.(它使用了chart.js而没有反应包装 – 但您的属性提供了与屏幕截图相同的输出)

猜你在找的JavaScript相关文章