在React Js中使用的Chart js中无法获得条形图颜色

这是我第一次使用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 (
      

        

          
        
      
    );
  }   

}

export default BarChart;

Banner.. 8

所以我能够通过这样做得到颜色:

    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
        }

希望这可以帮助有类似问题的人!

所以我能够通过这样做得到颜色:

    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
        }

希望这可以帮助有类似问题的人!