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

Javascript React Native Chart Kit-条形图颜色从上到下逐渐淡出每个条形图,javascript,reactjs,react-native,mobile,frontend,Javascript,Reactjs,React Native,Mobile,Frontend,我正在使用react native chart kit纱线添加react native chart kit来可视化数据,这是我的代码: import React from "react"; import { View, Text, Dimensions } from "react-native"; import RandomColor from "randomcolor"; import { LineChart, BarChar

我正在使用react native chart kit
纱线添加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;
从“React”导入React;
从“react native”导入{View,Text,Dimensions};
从“RandomColor”导入RandomColor;
进口{
线条图,
柱状图,
皮查特,
进度表,
贡献图,
堆叠条形图,
}从“反应本机图表工具包”;
常量图表=({classList})=>{
返回(
贝塞尔折线图
{
返回classItem.classname;
}),
数据集:[
{
数据:classList.map((classItem)=>{
返回classItem.studentList.length;
}),
},
],
}}
宽度={Dimensions.get(“窗口”).width}
高度={220}
yAxisInterval={1}
图表配置={{
背景颜色:“ffffff”,
背景梯度来自:“ffffff”,
背景梯度至:“ffffff”,
小数位数:2,
颜色:()=>“蓝色”,
labelColor:()=>“黑色”,
风格:{
边界半径:16,
},
道具:{
r:“6”,
冲程宽度:“1”,
笔划:“ffa726”,
},
}}
贝塞尔
风格={{
Margin:8,
边界半径:16,
}}
/>
);
};
导出默认图表;
这就是它返回的方式:


正如你所见,它起了作用,但并不完美。每个条末尾的颜色从上到下逐渐淡出,与白色背景色不匹配。所以,我想让每个条的颜色都是实心的。有没有办法解决这个问题?

这能回答你的问题吗?非常感谢你,但我改学颤振而不是RN,谢谢你,这回答了你的问题吗?非常感谢你,但我改学颤振而不是RN,谢谢你