Victory Charts 倾斜时会切断刻度标签答案

【问题标题】：Victory Charts cuts off tick labels when angledVictory Charts 倾斜时会切断刻度标签
【发布时间】：2022-11-06 17:38:02
【问题描述】：

（编辑：我还尝试将overflow: 'visible' 放在不同的位置，但无济于事。）

我正在使用 x 轴刻度标签的日期，所以我希望它们成一定角度以防止重叠。问题是它们没有在底部被切断，如此处所示（颜色用于显示不同的组件边缘）：

这是我的代码：

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

【问题讨论】：

标签： react-native victory-charts

【解决方案1】：

我没有找到解决您问题的自动解决方案

但是手动向图表添加“填充”道具对我有用

顺便说一句，这个解决方案适用于 VictoryNative 反应原生，但我想类似的东西也适用于网络版本

检查“填充”道具here

        <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
        />

【讨论】：