react-native - React 原生 svg 条形图显示多个列表；我怎样才能分开这两个酒吧

Question

React 原生 svg 条形图用于多个列表； 我怎样才能像这张图片一样分开两个条形？ bar-chart

current progress

我怎样才能实现这个目标？

到目前为止的代码:-

到目前为止我的代码:

import React, {Component} from 'react'
import { View, StyleSheet} from 'react-native'
import { BarChart, Grid } from 'react-native-svg-charts'

class SliderComponent extends Component{
render(){
 const data1 = [ 14, 8, 6, 13 ]
 .map((value) => ({ value }))
 const data2 = [ 9 , 7, 12, 10 ]
 .map((value) => ({ value }))

const barData = [
  {
  data: data1,
  svg: {
      fill: '#05E4B5',

  },
 },
 {
  data: data2,
  svg: {
    fill: '#7659FB',
},
},
  ]

return (
<BarChart
  style={ { height: 200 } }
  numberOfTicks={0}
  spacingInner={0.5}
  spacingOuter={0.2}
  data={ barData }
  yAccessor={({ item }) => item.value}
  contentInset={ { top: 20, bottom: 30 } }
  { ...this.props }
  >
  <Grid/>

) } }

Answer 1

我找到了答案: svg:{ 填充:'#05E4B5', x:-2， },