React Native Victory Charts在倾斜时切断分笔成交点标签

bhmjp9jg  于 2022-11-17  发布在  React
关注(0)|答案(1)|浏览(144)

(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.
jdg4fx2g

jdg4fx2g1#

我找不到自动解决您问题的方法
但mannualy添加“填充”道具的图表为我工作
顺便说一句,这个解决方案是针对react native上的VictoryNative的,但我想类似的东西也可以在react.js版本上使用
检查此处的“填充”属性

<VictoryChart width={400} theme={VictoryTheme.material}
    padding={{bottom:100,right:50,left:50}}
    >
        
        <VictoryAxis  //the x axis
        // axisLabelComponent={<VictoryLabel angle={-90}/>}
        tickLabelComponent={<VictoryLabel angle={-90} dy={-7} 
        textAnchor='end'
        // labelPlacement="perpendicular"
         />}
        /> 
        <VictoryAxis  dependentAxis //the y axis
        />

相关问题