胜利图表与轴和tickValues之间的间距问题

Question

这是我在项目

中想要的图表类型

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

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

正如您可以看到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

您可以像这样使用constructor(public hobbiesService: HobbiesService) {} 道具：

fixLabelOverlap

或者您可以使用<VictoryAxis tickValues={date} tickFormat={ (t, i) => { return t + ' '+ month[i]} } fixLabelOverlap /> 样式值将标签垂直放置

angle