这是我第一次使用Chart Js，我设法让它显示在我的页面上，但是不会显示键'label'，'backgroundColor'，'borderColor'和'borderWidth' . 键'标签'和'数据'工作正常，因为我可以看到图表中的标签和条形 . 我尝试将非显示键分配给变量，就像'标签'和'数据'一样，看看它是否会以这种方式运行但没有运气 . 我也试过传递十六进制颜色和常规颜色名称，如红色，蓝色等，但这也不起作用 . 如果有人能提供一些帮助，将不胜感激，谢谢！
'use strict';
import React, { Component } from 'react';
var Chart = require("react-chartjs").Bar;
class BarChart extends Component {
capitalize(name) {
return name.charAt(0).toUpperCase() + name.slice(1);
}
render() {
var pokeLabels = this.props.stats.map((label) => {
return this.capitalize(label.stat.name)
})
var pokeDataSet = this.props.stats.map((set) => {
return set.base_stat
})
console.log(this.props.stats);
var data = {
labels: pokeLabels,
datasets: [
{
label: 'Pokemon Stats',
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1,
data: pokeDataSet
}
]
}
return (
<div className='row'>
<div className='col-xs-12 col-sm-offset-3 col-xs-offset-0'>
<Chart data={data} width="600" height="250" redraw />
</div>
</div>
);
}
}
export default BarChart;
1 回答
所以我能够通过这样做得到颜色：
希望这可以帮助有类似问题的人！