应对VictoryBar式的困难

Question

所以我试图用胜利图表制作一个图表来显示一些构建数据。然而，我遇到了一些非常烦人的问题。这部纪录片相当糟糕，IMO……他们试图尽可能笼统地涵盖更多的领域。

屏幕截图位于此处

看上面的屏幕截图，蓝色框是因为我在Chrome的开发工具中突出显示了它。

• 红色框中的区域。我不明白它们为什么在那里。再往下看，没有什么东西可以填充或使用这个空间，我该如何摆脱它
• 如何将字体大小降低到可读级别

下面是我现在所在的

<VictoryChart
theme={VictoryTheme.material}
height={200}
domainPadding={{ x: 20 }}
>
<VictoryBar
barWidth={30}
style={{
data: { fill: f => f.fill }
}}
height={10}
data={this.state.dataParsed}
/>
</VictoryChart>

我试过直接编辑素材主题来调整字体大小，但没有效果。我也尝试过创建自己的主题，但我无法理解。。。

Answer 1

我的最终结果如下。在某个时候可能需要做更多的工作，但目前正在进行。文本大小更合理，填充已按排序

<VictoryChart
padding={{ top: 20, bottom: 30, left: 40, right: 20 }}
theme={VictoryTheme.material}
height={120}
domainPadding={{ x: 20 }}
>
<VictoryAxis
style={{
tickLabels: {
fontSize: 7
}
}}
/>
<VictoryAxis
dependentAxis
orientation="left"
style={{ tickLabels: { fontSize: 10 } }}
/>
<VictoryBar
barWidth={30}
style={{
data: { fill: f => f.fill }
}}
data={this.state.dataParsed}
/>
</VictoryChart>