<VictoryLabel /> 与图表其余部分之间的差距很大

Question

如何缩小标签和图表之间的差距？

相关代码：

<VictoryChart
  height={200}
  domainPadding={10}
  theme={VictoryTheme.material}
  animate={{
    duration: 2000,
    onLoad: { duration: 1000 }
  }}
>
  {props.title ? (
    <VictoryLabel
      text={props.title}
      x={165}
      y={10}
      textAnchor="middle"
      style={{ fontSize: 14 }}
    />
  ) : null}
  {/* Y-axis */}
  <VictoryAxis
    dependentAxis
    tickFormat={(x) => `${formatNumber(x)} gal`}
    style={{
      tickLabels: { fontSize: 6 }
    }}
  />
  <VictoryBar
    {...props}
    style={{ data: { fill: theme.palette.primary.main } }}
    labelComponent={
      <VictoryTooltip
        style={{
          strokeWidth: 1,
          fontSize: 6
        }}
      />
    }
  />
  {/* X-axis */}
  <VictoryAxis
    fixLabelOverlap={true}
    gridComponent={<span />}
    style={{
      tickLabels: { fontSize: 6 }
    }}
    tickValues={props.data.map((i, idx) => idx + 1)}
    tickFormat={props.data.map((i) =>
      format(dateStringToDate(i.date), 'MMM do')
    )}
  />
</VictoryChart>

Answer 1

您可以使用 axisLabelComponent 来配置轴标签的位置。因此，您可以使用 x 轴标签作为图表标签并使用 axisLabelComponent 配置其位置，您还可以使用样式道具提供样式。

<VictoryAxis
  label="Time (ms)"
 axisLabelComponent={<VictoryLabel dx={0} dy={-200} style={[
                { 
                  textanchor: "middle",
                }
              ]}
        />}
/>

这应该有所帮助。

Answer 2

您应该可以设置填充。查看更多详情 here

例如：padding={{ top: 0, bottom: 50, left: 50, right: 50 }}

<VictoryLabel /> 与图表其余部分之间的差距很大

Large gap between <VictoryLabel /> and rest of chart

javascript

reactjs

victory-charts