You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React Native SVG Chart Y轴数据点超出范围问题求助

图表异常情况说明

图表显示异常情况

Y轴标签已按 value/60 格式重新处理

Y轴最大值为170的数据点超出图表范围。图表高度未根据Y轴最高值自动调整,但200及以上的值可在范围内正常绘制。

<View
  style={{
    height: 250,
    paddingVertical: 10,
    flexDirection: 'row',
  }}>
  <YAxis
    data={props.data}
    yAccessor={({item}) => item?.sleep_n1_time}
    style={{marginBottom: xAxisHeight, width: 40, marginRight: 5}}
    contentInset={verticalContentInset}
    svg={axesSvg}
    formatLabel={(value, idx) => {
      if (props.data.length > 50) {
        return idx % 5 === 0 ? formatTime(value) : '';
      } else if (props.data.length > 20) {
        return idx % 2 === 0 ? formatTime(value) : '';
      } else {
        return formatTime(value);
      }
    }}
  />
  <View style={{flex: 1, marginRight: 10}}>
    <StackedAreaChart
      style={{height: 200, paddingVertical: 16}}
      data={props.data}
      keys={keys}
      contentInset={{...horizontalContentInset, ...verticalContentInset}}
      colors={colors}
      curve={shape.curveNatural}
      showGrid={false}
    />
    <XAxis
      style={{height: xAxisHeight}}
      data={props.data}
      formatLabel={(value, index) => {
        if (props.data.length > 50) {
          return index % 5 === 0 ? props.data[index]?.time : '';
        } else if (props.data.length > 20) {
          return index % 2 === 0 ? props.data[index]?.time : '';
        } else {
          return props.data[index]?.time;
        }
      }}
      contentInset={horizontalContentInset}
      svg={axesXSvg}
    />
  </View>
</View>

内容的提问来源于stack exchange,提问作者Neeleshwar Kumar

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.08 17:05:25