如何使用 react-native-chart-kit 更改条形图中条形的背景颜色答案

【问题标题】：How to change the background color of the bars in a barchart using react-native-chart-kit如何使用 react-native-chart-kit 更改条形图中条形的背景颜色
【发布时间】：2020-05-05 17:08:29
【问题描述】：

我正在使用 react-native-chart-kit，我正在尝试使用任何颜色填充条形的 cbar 图表，到目前为止它是灰色的，但我正在尝试更改它，但我尝试添加颜色： {} 在数据集部分以及 svg.但是没有成功。任何建议将不胜感激。

render() {
        return (
            <View>
                <BarChart
                    data={{
                        labels: [
                            '1',
                            '2',
                            '3',
                            '4',
                            '5',
                            '6',
                            '7'
                        ],
                        datasets: [
                            {
                                data: this.props.data,
                            },
                        ],
                    }}
                    svg={{ fill: 'green' }}
                    width={Dimensions.get('window').width - 16}
                    height={220}

                    chartConfig={{
                        backgroundColor: '#fff',
                        backgroundGradientFrom: '#fff',
                        backgroundGradientTo: '#fff',
                        decimalPlaces: 2,
                        color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
                        style: {
                            borderRadius: 16,
                        },
                        propsForDots: {
                            r: "0",
                            strokeWidth: "2",
                            stroke: "#fff"
                        },
                        propsForBackgroundLines: {
                            strokeWidth: 0
                        },
                    }}
                    style={{
                        marginVertical: 8,
                        borderRadius: 16,
                    }}
                />
            </View>
        );
    }

【问题讨论】：

标签： react-native react-native-chart-kit

【解决方案1】：

您可以在 chartConfig 中设置 fillShadowGradient 和 fillShadowGradientOpacity。

【讨论】：

【解决方案2】：

您可以在

中添加以下行

chartConfig:{{
    fillShadowGradient:'skyblue',
    fillShadowGradientOpacity:1,
}}

效果很好

【讨论】：