如何在React Native中调整标签文本中心React Native中的SVG图表

发布于 2025-01-20 23:58:37 字数 1534 浏览 1 评论 0原文

      <View style={{flex: 1, height: windowHeight * 0.39, marginLeft: 10}}>
    <BarChart
      style={{flex: 1}}
      data={data}
      spacingInner={width * 0.000999}
      spacingOuter={
        Months.length == 1
          ? width * 0.36
          : Months.length == 3
          ? width * 0.3
          : null
      }
      horizontal={false}
      yAccessor={({item}) => item.value}
      svg={{fill: fill}}
      contentInset={{top: width * 0.025, bottom: width * 0.025}}
      spacing={0.2}
      gridMin={0}
      gridMax={Math.max(...values)}>
      <Grid svg={{stroke: LineFill}} />
    </BarChart>
    <XAxis
      xAccessor={({index}) => index}
      data={Months}
      formatLabel={(label, index) => data[index].label}
      style={{
        marginHorizontal: width * -0.03,
        height: width * 0.04,
        alignItems: Months.length == 1 ? 'center' : null,
      }}
      contentInset={{
        left: Months.length == 3 ? width * 0.26 : Months.length == 4 ? width * 0.09 :  width * 0.07,
        right: Months.length == 3 ? width * 0.26 : Months.length == 4 ? width * 0.09 : width * 0.066,
      }}
      svg={axesSvgXAxis}
    />
  </View>

blockquote 嗨,我是新手反应天然的,我正在使用React Native-SVG-tharts,根据React Native-SVG-charts中的bar的位置,我在调整标签文本中心面临问题。 strong text

https://i.sstatic.net/txsna.png

      <View style={{flex: 1, height: windowHeight * 0.39, marginLeft: 10}}>
    <BarChart
      style={{flex: 1}}
      data={data}
      spacingInner={width * 0.000999}
      spacingOuter={
        Months.length == 1
          ? width * 0.36
          : Months.length == 3
          ? width * 0.3
          : null
      }
      horizontal={false}
      yAccessor={({item}) => item.value}
      svg={{fill: fill}}
      contentInset={{top: width * 0.025, bottom: width * 0.025}}
      spacing={0.2}
      gridMin={0}
      gridMax={Math.max(...values)}>
      <Grid svg={{stroke: LineFill}} />
    </BarChart>
    <XAxis
      xAccessor={({index}) => index}
      data={Months}
      formatLabel={(label, index) => data[index].label}
      style={{
        marginHorizontal: width * -0.03,
        height: width * 0.04,
        alignItems: Months.length == 1 ? 'center' : null,
      }}
      contentInset={{
        left: Months.length == 3 ? width * 0.26 : Months.length == 4 ? width * 0.09 :  width * 0.07,
        right: Months.length == 3 ? width * 0.26 : Months.length == 4 ? width * 0.09 : width * 0.066,
      }}
      svg={axesSvgXAxis}
    />
  </View>

Blockquote
Hi i am new to react native , i am using react native-svg-charts , i am facing issue in adjust label text center according to the position of bars in react native-svg-charts.strong text

https://i.sstatic.net/TXSNA.png

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文