React Native Chart Kit - 条形图颜色从上到下淡出每个条形图

Question

我正在使用 react native chart kit yarn add react-native-chart-kit 来可视化数据，这是我的代码：

import React from "react";
import { View, Text, Dimensions } from "react-native";
import RandomColor from "randomcolor";
import {
  LineChart,
  BarChart,
  PieChart,
  ProgressChart,
  ContributionGraph,
  StackedBarChart,
} from "react-native-chart-kit";

const Chart = ({ classList }) => {
  return (
    <View>
      <Text>Bezier Line Chart</Text>
      <BarChart
        data={{
          labels: classList.map((classItem) => {
            return classItem.classname;
          }),
          datasets: [
            {
              data: classList.map((classItem) => {
                return classItem.studentList.length;
              }),
            },
          ],
        }}
        width={Dimensions.get("window").width} 
        height={220}
        yAxisInterval={1} 
        chartConfig={{
          backgroundColor: "#ffffff",
          backgroundGradientFrom: "#ffffff",
          backgroundGradientTo: "#ffffff",
          decimalPlaces: 2, 
          color: () => "blue",
          labelColor: () => "black",
          style: {
            borderRadius: 16,
          },
          propsForDots: {
            r: "6",
            strokeWidth: "1",
            stroke: "#ffa726",
          },
        }}
        bezier
        style={{
          marginVertical: 8,
          borderRadius: 16,
        }}
      />
    </View>
  );
};

export default Chart;

这就是它的返回方式：

如您所见，它有效，但并不完美。每个条的末端颜色从上到下逐渐淡出，与白色背景颜色不相配。所以，我想让每个条形的颜色都是实心的。有什么办法可以解决吗？

Answer 1

使用flatColor={true} & withCustomBarColorFromData={true}

喜欢这个

 const data = {
        labels: ["label1", "label2", "label3"],
        datasets: [{
                data: [50, 45, 28],
                colors: [
                    () => "blue"
                ]}]
 };
<BarChart
                
     data={data}
     width={Dimensions.get("window").width - 20}
     height={220}
     chartConfig={{
       //....
     }}
     withCustomBarColorFromData={true}
     flatColor={true}
  />

Answer 2

使用上述答案后flatColor={true} & withCustomBarColorFromData={true}

如果您希望数据集中的颜色是动态的，请使用以下代码：

 const data = {
        labels: ["label1", "label2", "label3"],
        datasets: [
                  {
                     data: [50, 45, 28],
                    colors: data.colorName.map(item => {
                      return () => item.color;
                    }),
                  },
                ],
 };