胜利 |如何从最低的负 y 轴值显示 x 轴

Question

我有一个图表来显示一些值，但是 y 轴有负值，如下所示。

<VictoryChart
  theme={VictoryTheme.material}
>
  <VictoryLine
    style={{
      data: { stroke: "#c43a31" },
      parent: { border: "1px solid #ccc"}
    }}
    data={[
      { x: 1, y: -2 },
      { x: 2, y: -3 },
      { x: 3, y: -5 },
      { x: 4, y: -4 },
      { x: 5, y: -7 }
    ]}
  />
</VictoryChart>

是这样显示的

我需要让 x 轴位于 y 轴的 -7 值处。我怎样才能做到这一点？谢谢！

Answer 1

试试这个：

<VictoryChart 
  theme={VictoryTheme.material}
  domain={{x: [1, 5], y: [-7, -2]}}
>
<VictoryAxis 
  orientation="top"
/>

<VictoryAxis dependentAxis
  orientation="left"
  invertAxis
/>

<VictoryLine
  style={{
    data: { stroke: "#c43a31" },
    parent: { border: "1px solid #ccc"}
   }}
  data={[
    { x: 1, y: -2 },
    { x: 2, y: -3 },
    { x: 3, y: -5 },
    { x: 4, y: -4 },
    { x: 5, y: -7 }
  ]}
/>
</VictoryChart>

胜利 |如何从最低的负 y 轴值显示 x 轴

Victory | How to display x-axis from the lowest negative y-axis value

reactjs

react-native

formidable

victory-charts