4
我試過用react-chartjs製作雷達圖表(https://github.com/reactjs/react-chartjs)。它呈現,但沒有顏色。react-chartjs圖表呈現不帶顏色
我缺少什麼?我幾乎在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。