需要一些胜利图表帮助

Question

我正在使用React Victory Charts，需要一些样式方面的帮助。

我是Victory Charts的新手，您的帮助将受到高度欢迎。

我需要以下方面的帮助：

1. 轴，条和文本之间的填充。
2. 一些文本被截断。
3. 条形尺寸。

这就是我所拥有的：

<VictoryChart
  width={600}
  domainPadding={{ y: 50 }}>
    <VictoryAxis
        // tickValues specifies both the number of ticks and where
        // they are placed on the axis
        dependentAxis
        style={{
          tickLabels: {fontSize: 15, padding: 15 , width: 60}
        }}
        tickValues={[1, 2, 3, 4]}
        tickFormat={["Yes", "No", "Probably", "Never"]}
      />
  <VictoryBar horizontal
    offsetY={20}
    padding={{ top: 20, bottom: 60 }}
    style={{
      data: { fill: "rgb(23, 52, 76)" },
      parent: { border: "1px solid #ccc"},
    }}
      labels={(d) => ("| " + d.y + " (22%)")}
      data={data}
      x="quarter"
      y="earnings"
  />
</VictoryChart>

这就是所得到的。

这是我想要获得的样式。

在此处查看HTML：

<VictoryChart
  width={600}
  domainPadding={{ y: 50 }}>
    <VictoryAxis
        // tickValues specifies both the number of ticks and where
        // they are placed on the axis
        dependentAxis
        style={{
          tickLabels: {fontSize: 15, padding: 15 , width: 60}
        }}
        tickValues={[1, 2, 3, 4]}
        tickFormat={["Yes", "No", "Probably", "Never"]}
      />
  <VictoryBar horizontal
    offsetY={20}
    padding={{ top: 20, bottom: 60 }}
    style={{
      data: { fill: "rgb(23, 52, 76)" },
      parent: { border: "1px solid #ccc"},
    }}
      labels={(d) => ("| " + d.y + " (22%)")}
      data={data}
      x="quarter"
      y="earnings"
  />
</VictoryChart>

Answer 1

为了使文本被截断，请像下面这样使用paddingprop VictoryChart：

<VictoryChart padding={{ left: 80, right: 100 }} />

这应该给您足够的空间以防止刻度线标签和条形标签被切掉。请注意，domainPadding在这种情况下，在条形上方和下方添加了空间。

要使轴标签左对齐，需要tickLabelComponent在轴上指定a ，如下所示：

<VictoryAxis tickLabelComponent={<VictoryLabel x={10} textAnchor="start" />} />

要在条和轴之间增加间距，请使用轴上的offsetX支柱。它将使轴从左侧间隔指定的量，而条形图将padding与图表左侧的间隔相等。

<VictoryAxis offsetX={80} />

这是这些配置的小提琴：https : //jsfiddle.net/mfxtznun/3/