如何使用react原生图表套件更改条形图中条形图的背景颜色

Question

我使用的是react原生图表套件，我正在尝试使用任何颜色填充条形图的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

您可以在中添加以下行

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

它的工作良好

Answer 2

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

更多信息请点击此处：https://github.com/indiespirit/react-native-chart-kit#chart-样式对象

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
});
};