无法在 React Js 中工作的图表 js 中获取条形图颜色

Question

这是我第一次使用Chart Js，我设法让它显示在我的页面上，但键"label"、"backgroundColor"、"borderColor"one_answers"borderWidth"不会显示。键"标签"one_answers"数据"工作得很好，因为我可以看到图表中的标签和条形图。我试着将非显示键分配给变量，比如"标签"one_answers"数据"，看看它是否能以这种方式工作，但没有成功。我还试着传递十六进制颜色和常规颜色名称，如红色、蓝色等，但也不起作用。如果有人能提供一些帮助，我们将不胜感激，谢谢！

'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;

Answer 1

所以我可以通过这样做来获得颜色：

    datasets: [
        {
            label: "My First dataset",
            fillColor: ["rgba(0,10,220,0.5)","rgba(220,0,10,0.5)","rgba(220,0,0,0.5)","rgba(120,250,120,0.5)" ],
            strokeColor: "rgba(220,220,220,0.8)", 
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: pokeDataSet
        }

希望这能帮助到有类似问题的人！

Answer 2

背景颜色将更改条形图的颜色。

所以，你可以给不同的酒吧不同的颜色。

datasets: [
          {
        label: 'My First dataset',
        backgroundColor: ['rgba(0,10,220,0.5)', 'rgba(220,0,10,0.5)'],
        borderColor: 'rgba(0,0,0,1)',
        data: pokeDataSet,
          },
    ],