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
相关产品推荐
相关产品推荐

