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

Question

我正在使用 react-native-chart-kit 并且我正在尝试使用任何颜色填充条形图的 cbar 图表，到目前为止它是灰色的但我正在尝试更改它但我已经尝试添加color: {} 在数据集部分，以及 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>
        );
    }

Answer 1

您可以在图表配置中设置 fillShadowGradient 和 fillShadowGradientOpacity。

更多信息在这里：https://github.com/indiespirit/react-native-chart-kit#chart-style-object

Answer 2

您可以在

中添加以下行

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

它工作正常

Answer 3

<BarChart
        data={{
              
              labels: this.state.bLabel,
              datasets: [
                {
                  data: this.state.bData,
                }
              ]
            }}
            width={(Dimensions.get("window").width/100)*98}
            height={300}
            yAxisLabel=""
            chartConfig={this.state.chartConfig}
            verticalLabelRotation={0}
            showValuesOnTopOfBars={true}
            fromZero={true}
            withCustomBarColorFromData={true}//FOR CUSTOM BAR COLORS
            withHorizontalLabels ={false}
            style={{alignSelf:"flex-start"}}
          />
          
          
          
          
          
//Go to 
//node_modules->react-native-chart-kit->dist->BarChart.js
//Change this-> from line no-38 to 50


        _this.renderBars = function (_a) {
            var colorC=["#8000FF80","#0000ff80","#00FFFF80","#00ff0080","#ffff0080","#FFA50080","#ff000080","#2e000080","#00000080","#000000dd"];/////////AYUSH KHADE
            var data = _a.data, width = _a.width, height = _a.height, paddingTop = _a.paddingTop, paddingRight = _a.paddingRight, barRadius = _a.barRadius, withCustomBarColorFromData = _a.withCustomBarColorFromData;
            var baseHeight = _this.calcBaseHeight(data, height);
            return data.map(function (x, i) {
                var barHeight = _this.calcHeight(x, data, height);
                var barWidth = 32 * _this.getBarPercentage();
                return (<Rect key={Math.random()} x={0 +
                    (i * (width - 0)) / data.length +
                    barWidth / 2} y={((barHeight > 0 ? baseHeight - barHeight : baseHeight) / 4) * 3 +
                    paddingTop} rx={barRadius} width={barWidth} height={(Math.abs(barHeight) / 4) * 3} fill={colorC[i]}/>);//AYUSH KHADE
            });
        };

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

How to change the background color of the bars in a barchart using react-native-chart-kit

react-native

react-native-chart-kit