Kann nicht Balkendiagramm Farben in Chart js Arbeit in React Js

Question

Dies ist mein erstes Mal mit Chart Js und ich es geschafft, es auf meiner Seite anzeigen, aber die Tasten 'label', 'backgroundColor', 'borderColor' und 'borderWidth' wird nicht angezeigt. Die Tasten 'Labels' und 'Data' funktionieren einwandfrei, da ich die Labels und die Balken im Diagramm sehen kann. Ich habe versucht, die nicht-anzeigenden Schlüssel Variablen wie "Labels" und "Daten" zuzuordnen, um zu sehen, ob es auf diese Weise funktioniert, aber kein Glück. Ich habe auch versucht, Hexfarben und normale Farbnamen wie Rot, Blau usw. zu übergeben, aber das hat auch nicht funktioniert. Wenn jemand Hilfe leisten könnte, wäre es sehr dankbar, danke!

'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

So konnte ich die Farben, indem Sie diese Arbeit bekommen:

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 
     } 

Hope this kann jemand helfen, die ein ähnliches Problem hat!