Javascript 应对维克托巴式的困难

因此，我试图制作一个图表，用胜利图表显示一些构建数据。然而，我遇到了一些相当恼人的问题。这部纪录片在我看来相当糟糕。。。他们试图覆盖尽可能多的领域

看看上面的屏幕截图，蓝色框是因为我在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>

f、 填充}
}}
高度={10}
数据={this.state.dataParsed}
/>

我试着直接编辑材料主题来调整字体大小，但没有效果。

---

我也尝试过创建我自己的主题，但我无法理解…

我的最终结果如下。在某一点上可以做更多的工作，但这是目前正在做的。文本的大小更合理，填充已排序

f、 填充}
}}
数据={this.state.dataParsed}
/>

---

解决了填充问题。仍在处理字体大小问题。VictoryChart中的Prop称为Padding---Padding={{top:20，bottom:30，left:40，right:20}

        <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>