(Edit:我也试过把overflow: 'visible'
放在不同的位置,但都无济于事。)
我在X轴刻度标签上使用了日期,因此希望它们保持一定的Angular ,以防止重叠。问题是它们没有在底部被截断,如下图所示(颜色是为了显示不同的组件边缘):
下面是我的代码:
<View style={{ backgroundColor: 'red', paddingBottom: 50 }}>
<VictoryChart
theme={chartTheme}
width={screenWidth - 10}
animate={{
onLoad: { duration: 100 },
duration: 500,
}}
containerComponent={<VictoryContainer style={{ backgroundColor: 'blue', paddingBottom: 50 }} />} >
<VictoryAxis
label={plotText.xLabel}
style={{ // adding padding here does nothing
tickLabels: { angle: -45, textAnchor: 'end' } // adding padding here does nothing
}}
tickValues={dispRSHistData.ticks}
tickFormat={(t) => getFormattedDate(t)}
/>
<VictoryAxis
dependentAxis
label={plotText.yLabel} />
<VictoryLine
data={dispRSHistData.data}
x="timestamp"
y="percentSuccess"
style={{ data: { stroke: "tomato" } }}
size={10} />
</VictoryChart>
</View>
I've tried setting various heights manually but nothing seems to give space to show the full tick labels.
1条答案
按热度按时间jdg4fx2g1#
我找不到自动解决您问题的方法
但mannualy添加“填充”道具的图表为我工作
顺便说一句,这个解决方案是针对react native上的VictoryNative的,但我想类似的东西也可以在react.js版本上使用
检查此处的“填充”属性