reactjs - 胜利图与轴和刻度值之间的间距有关

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

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