reactjs - 轴和刻度值之间的间距的胜利图表问题

Question

这是我在项目中想要的图表类型

该图表取自Victory Chart的教程，可以在此处找到相同的代码

现在我想要具有相似结构的图表，所以我尝试调整示例代码来表示我想要的数据，但我得到了这个：

如您所见，x 轴中刻度值之间的空格完全混乱，代码相同：

<VictoryChart
            theme={VictoryTheme.material}
            domain={{ y: [0, 50] }}
            domainPadding={130}
        >
            
            <VictoryAxis
                //padding={{ left: 50, right: 50  }}
                tickValues={date}
                tickFormat={ (t, i) => { return t + ' '+ month[i]} }   
            />

             <VictoryAxis
               dependentAxis
            />
 
            <VictoryStack
                colorScale={this.state.colors}>
               
            </VictoryStack> 
        </VictoryChart>

所以我的问题是如何在x 轴的刻度值之间创建间距。

Answer 1

您可以fixLabelOverlap像这样使用道具：

<VictoryAxis
 tickValues={date}
 tickFormat={ (t, i) => { return t + ' '+ month[i]} }
 fixLabelOverlap 
/>

或者您可以使用angle样式值垂直放置标签

<VictoryAxis
 tickValues={date}
 tickFormat={ (t, i) => { return t + ' '+ month[i]} }
 style={{tickLabels: { angle: 90 }}}
/>