2017-02-10 82 views
4

我試過用react-chartjs製作雷達圖表(https://github.com/reactjs/react-chartjs)。它呈現,但沒有顏色。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) { 
 
\t var rtn = []; 
 
\t while (rtn.length < num) { 
 
\t \t rtn.push((Math.random() * (max - min)) + min); 
 
\t } 
 
\t return rtn; 
 
} 
 

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

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

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

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

 
TasteGraph.defaultProps = { 
 
\t rating: [] 
 
}; 
 

 
export default TasteGraph;

似乎有不被漏掉任何進口或清除錯誤。基於另一個相關的SO問題,我嘗試用「[」和「]」圍繞chartOptions和ChartData。

回答

3

fillColor代替backgroundColor。顯然你的borderColor也應該被替換爲strokeColor

請看jsfiddle。 (它使用沒有反應包裝的chart.js - 但是你的屬性給出了和截圖一樣的輸出)