Javascript 如何使用React Chartkick为Chart.js条形图设置其他选项

我正在尝试使用React-Chartkick和Chart.js显示条形图，我想定制条形图的颜色。目前，我可以通过传递这样的道具将所有条设置为相同的颜色：

使用React Chartkick中的折线图，您可以通过该道具传递一组颜色来设置线条的颜色。然而，条形图似乎只接受第一种颜色。这是我的极限，还是我做错了什么

我尝试通过

库
道具传递选项（如下所述），因为这就是我自定义轴和标签颜色的方式，但这似乎不会影响条

以下是我当前的代码：

    state = {
        chartLibraryOptions: {
            borderColor: "#e34402", // does nothing here
            backgroundColor: "#e34402", // nor this
            scales: {
                yAxes: [
                    {
                        ticks: { fontColor: "#fff", autoSkip: false }
                    }
                ],
                xAxes: [
                    {
                        ticks: { fontColor: "#fff" }
                    }
                ]
            }
        }
    };

    render() {
        return (
            <BarChart
                data={this.state.chartData}
                library={this.state.chartLibraryOptions}
                colors={["#e34402", "#e3b502"]} // All bars are the first colour
            />
        );
    }

状态={
图表库选项：{
borderColor:#e34402“，//在这里什么都不做
背景色：“#e34402”//也不是这个
比例：{
雅克斯：[
{
记号：{fontColor:#fff'，autoSkip:false}
}
],
xAxes：[
{
记号：{fontColor:#fff}
}
]
}
}
};
render（）{
返回(
);
}

我希望能够更改每个条的颜色，但在所有这些之后，我不确定这是否可以通过Chartkick实现？
嗯，我在一个项目中使用了相同的节点包，采用了不同的方法。几乎所有图表都具有相同的属性

基本上，这个属性
dataset={{{backgroundColor:['white'，'yellow']，}}}
您只需为每个
条上色即可。您可以将字符串或字符串数组传递给backgroundColor

数据集中的
backgroundColor
采用两种类型的数据
String
和
Array（object）
。下面是传递数据的典型示例

将
backgroundColor
设置为字符串时，它会将相同的颜色应用于每个条。e、 背景颜色：“红色”
条形图-


将
backgroundColor
设置为数组时，它会将数组中的每种颜色应用于每个条。e、 g
backgroundColor:['red'，'yellow']
，然后根据数据长度创建一个颜色循环
柱状图-


具体实施如下：

/* eslint-disable no-plusplus */
 import React from 'react';
 import { ColumnChart, BarChart } from 'react-chartkick';
 import { chartOne } from '../common/chartData';
 import 'chart.js';

 const MonthlyGrowth = () => {
    const handleBgColors = () => {
       const firstColor = "#A00B16", secondColor = "#FAA226";
       const arrOfBgColors = [];
       for (let i = 1; i <= chartOne.length; i++) {
           if (i % 2 === 0) {
              arrOfBgColors.push(secondColor)
           } else {arrOfBgColors.push(firstColor)}
       }
       return arrOfBgColors;
   }

   return (
     <div className="bukka-card uk-card-default bg-white pt-4 pb-2 mr-1 pl-3 pr-2 pl- 
       lg-5">
        <h2 className="mt-2">4,500,000</h2>
        <BarChart
           dataset={{ borderWidth: 0, width: 0, backgroundColor: handleBgColors(), }}
           data={chartOne}
        />
      </div>
    )
}

export default MonthlyGrowth;

/*eslint禁用无脉冲*/
从“React”导入React；
从“react chartkick”导入{ColumnChart，BarChart}；
从“../common/chartData”导入{chartOne}；
导入“chart.js”；
const MonthlyGrowth=（）=>{
常量把手颜色=（）=>{
常量firstColor=“#A00B16”，secondColor=“#FAA226”；
常量arrOfBgColors=[]；
对于（让i=1；i好吧，我在一个项目中使用了相同的节点包，采用不同的方法，这对我来说很有用。几乎所有的图表都具有相同的属性

基本上，这个属性
dataset={{{backgroundColor:['white'，'yellow']，}}}
您只需为每个
条上色即可。您可以将字符串或字符串数组传递给backgroundColor

数据集中的
backgroundColor
采用两种类型的数据
String
和
Array（object）
。下面是传递数据的典型示例

当您将
backgroundColor
设置为字符串时，它会将相同的颜色应用于每个条。例如
backgroundColor:“红色”
条形图-


将
backgroundColor
设置为数组时，它会将数组中的每种颜色应用于每个条。例如
backgroundColor:['red'，'yellow']
，然后根据数据长度创建颜色循环
柱状图-


具体实施如下：

/* eslint-disable no-plusplus */
 import React from 'react';
 import { ColumnChart, BarChart } from 'react-chartkick';
 import { chartOne } from '../common/chartData';
 import 'chart.js';

 const MonthlyGrowth = () => {
    const handleBgColors = () => {
       const firstColor = "#A00B16", secondColor = "#FAA226";
       const arrOfBgColors = [];
       for (let i = 1; i <= chartOne.length; i++) {
           if (i % 2 === 0) {
              arrOfBgColors.push(secondColor)
           } else {arrOfBgColors.push(firstColor)}
       }
       return arrOfBgColors;
   }

   return (
     <div className="bukka-card uk-card-default bg-white pt-4 pb-2 mr-1 pl-3 pr-2 pl- 
       lg-5">
        <h2 className="mt-2">4,500,000</h2>
        <BarChart
           dataset={{ borderWidth: 0, width: 0, backgroundColor: handleBgColors(), }}
           data={chartOne}
        />
      </div>
    )
}

export default MonthlyGrowth;

/*eslint禁用无脉冲*/
从“React”导入React；
从“react chartkick”导入{ColumnChart，BarChart}；
从“../common/chartData”导入{chartOne}；
导入“chart.js”；
const MonthlyGrowth=（）=>{
常量把手颜色=（）=>{
常量firstColor=“#A00B16”，secondColor=“#FAA226”；
常量arrOfBgColors=[]；
对于（设i=1；我有没有尝试backgroundColor？我有，作为道具和作为chartLibraryOptions中的选项。你有没有尝试backgroundColor？我有，作为道具和作为chartLibraryOptions中的选项。