1

我有这张胜利图：

<VictoryGroup
  singleQuadrantDomainPadding={false}
  padding={0}
  domainPadding={{ y: 40, x: 40 }}
  height={150}
  data={[123, 312]}
>
  <VictoryArea
    labels={this.generateLabels}
    style={{
      data: {
        fill: "rgba(200,200,200, 0.2)",
        stroke: "yellow",
        strokeWidth: 2
      }
    }}
  />
  <VictoryScatter size={5} style={{ data: { fill: "yellow" } }} />
</VictoryGroup>

胜利图

它在这个沙盒上可用： https ://codesandbox.io/s/victory-layout-issue-mkrdy

不幸的是，当只有一个数据元素可用时，图表的布局不是很好。仅显示 VictoryScatter 中的黄点。灰色区域或标签均未显示。我该如何解决这个问题？

在此处输入图像描述

4

1 回答 1

0

您在这里使用了两个图表，一个散点图和一个面积图。当您在散点图中仅显示一个点时，您的区域图不可能确定两个点来开始和停止实际区域。您可以将其视为 0px 宽的区域（它在相同的确切位置开始和停止。

您可以在单点下方使用条形图伪造一个区域，如下所示：

<VictoryBar barWidth={5} style={{data: {fill: "rgba(200,200,200, 0.2)"}}}/>

并在任何时候显示它data.length === 1，它看起来像这样：

https://codesandbox.io/s/victory-layout-issue-jmpew

您还会注意到我将标签放在<VictoryScatter />而不是放在 上<VictoryArea>，因此您的第二个图表（带有单点）现在可以正确显示标签。

像这样 ：

<VictoryScatter
    labels={this.generateLabels}
    size={5}
    style={{ data: { fill: "yellow" } }}
/>
于 2019-08-09T09:29:09.770 回答