Victory Chart 轴和 tickValues 之间的间距问题

Question

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

图表摘自Victory Chart and the code for the same can be found 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

您可以像这样使用 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 }}}
/>

Victory Chart 轴和 tickValues 之间的间距问题

Victory Chart issues with spacing between axis and tickValues

reactjs

victory-charts