2

我试图让 VictoryChart 填满整个容器,但它在右侧留下了大量的空白。这就是我想要做的:

<VictoryChart domainPadding={{ x: 25 }}>
    <VictoryAxis
      tickValues={categories ? categories.x : undefined}
    />
    <VictoryAxis
      tickValues={categories ? categories.y : undefined}
      domain={yAxisDomain}
      dependentAxis
      crossAxis
    />
    <VictoryBar
      cornerRadius={{ topLeft: 5, topRight: 5 }}
      data={data}
      labels={labels}
    />
  </VictoryChart>

这就是正在呈现的内容:

图表

<div class="VictoryContainer" style="height: 100%; width: 100%; user-select: none; pointer-events: none; touch-action: none; position: relative;">
   <svg width="450" height="300" role="img" aria-labelledby="victory-container-2-title victory-container-2-desc" viewBox="0 0 450 300" style="pointer-events: all; width: 100%; height: auto;">
      ...
   </svg>
   <div style="z-index: 99; position: absolute; top: 0px; left: 0px; width: 100%; height: auto;">
      <svg width="450" height="300" viewBox="0 0 450 300" style="overflow: visible; width: 100%; height: auto;"></svg>
   </div>
</div>
4

1 回答 1

9

VictoryChart通过在组件上设置填充解决了这个问题:

<VictoryChart
    domainPadding={{ x: 25 }}
    padding={{ top: 50, bottom: 50, right: 0, left: 50 }}
  >
于 2019-09-12T14:15:44.197 回答