Question

因此，我尝试使用Victory图表使图表显示一些构建数据。但是，我遇到了一些非常烦人的问题。该文档非常糟糕，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>

应对VictoryBar风格的困难

1 个答案: