时间戳

首页 > 解决方案 > react-native svg-charts中的X轴标签未正确显示

react-native - react-native svg-charts中的X轴标签未正确显示

问题描述

我在使用 react-native svg-charts 格式化我的 X 轴时遇到问题。标签的顶部被切断，我不确定它们是否与条形图元素正确对齐。我已经使用内容插入来尝试手动对齐它们，并且我正在使用旋转样式使标签更好地适应屏幕（不重叠）。

相关代码如下：

const verticalContentInset = { bottom: 5, top: 30 }
           <View style={{ flexDirection: 'column', flex: 1, width: '100%', paddingBottom: 5 }}>
            <View style={{ flexDirection: 'row', height: 300, padding: 20}}>
              <YAxis
                data={volumeData}
                style={{ marginBottom: 30 }}
                contentInset={verticalContentInset}
                svg={YaxesSvg}
                numberOfTicks={10}
                formatLabel={(value) => `${value}%`}
              />
              <BarChart style={{ flex: 1 }} data={newData} yAccessor={({item}) => item.y} contentInset={{ top: 30, bottom: 30 }}>
                <Grid />
              </BarChart>
            </View>
            <View style={{ height: 150 }}>
              <XAxis
                data={mineralName}
                style={{ height: 150}}
                contentInset={{ left: 20, right: 40}}
                scale={scale.scaleBand}
                svg={{ fontSize: 10, rotation: 40, fill: 'black', originY: 35 }}
                formatLabel={(value, index) => '----' + mineralName[index] }
              />
            </View>
          </View>

上面代码渲染时的截图： 轴格式错误的条形图'

正如您所看到的，一些 X 轴值从顶部被截断，我已经尝试了许多值，但似乎无法找到标签正确呈现的最佳位置。我想为标签添加更多内容，但首先需要修复格式。Y 轴也使用内容插图固定到位。非常感谢任何帮助，因为我已经浏览了 github repo 提供的资源等等。谢谢一米！

标签： react-nativeexporeact-native-svg-charts

解决方案

我也被这个问题困扰。

我向 XAxis 组件的 svg 道具添加了一个 y 变换，它为我排序。

<XAxis
  svg={{
      translateY: 5,
      ...
  }}
  ...
/>

尝试添加它，看看你的进展如何。

推荐阅读