VictoryLabel 坐标与 VictoryChart 域不匹配

Question

我在 VictoryChart 中显示股票数据，其中 x 是代表天数的数字（即简单的 0、1、2、3... 等），y 是价格那天。

我已经为 VictoryChart 设置了一个域（从最低值到最高值）并且我有一个 VictoryLine 可以正确显示。

我想在最低价和最高价处添加一些“浮动”标签（不在下图中），但我对标签的 x 和 y 坐标有疑问因为它们似乎与我定义的域不匹配。

我注意到如果我在图表中放置一个标签，位置 x = 0，y = 0，那么它位于左上角（我预计是左下角）。这是它目前的样子，带有一些测试标签：

代码：

<VictoryChart
  domain={{ x: [startPrice.x, endPrice.x], y: [Math.floor(lowestPrice.y), Math.ceil(highestPrice.y)] }}
>
  <VictoryLine
    style={{
      data: { stroke: '#4CB872', strokeWidth: 4 },
    }}
    data={chartData}
    animate={{
      duration: 1000,
      onLoad: { duration: 1000 },
    }}
  />
  <VictoryLine
    style={{ data: { stroke: Colors.Beige, strokeDasharray: '2,5', strokeWidth: 1, opacity: 0.5 } }}
    data={chartData.map((datum) => ({ x: datum.x, y: chartData[0].y }))}
    animate={{
      duration: 1000,
      onLoad: { duration: 1000 },
    }}
  ></VictoryLine>
  <VictoryLabel text='x10 y10' x={10} y={10} />
  <VictoryLabel text='x100 y100' x={100} y={100} />
  <VictoryLabel text='x200 y200' x={200} y={200} />
</VictoryChart>

chartData 例如：

"chartData": [
   {
      "date": "2020-09-21",
      "x": 0,
      "y": 142.31579017,
    },
    {
      "date": "2020-09-22",
      "x": 1,
      "y": 142.31420395,
    },
    {
      "date": "2020-09-23",
      "x": 2,
      "y": 142.16096094,
    },
    {
      "date": "2020-09-24",
      "x": 3,
      "y": 142.09860251,
    },
...

如何在 VictoryLabel 上使用 x/y 定位将它们放置在关于我定义的域的图表上？例如。标记为“x100 y100”的标签不应位于 x=100,y=100 位置，而应位于 x=5,y=142.5 或附近。

Answer 1

感谢 FormidableLabs 的@boygirl，我现在有了解决方案，请参阅 (https://github.com/FormidableLabs/victory-native/issues/637)

他们在那里写道：

VictoryLabel 上的 x,y,props 对应于 svg 坐标 space，而不是数据坐标 space。您可以创建一个自定义标签，使用 VictoryChart 传入的 scale 属性将数据坐标转换为 svg 坐标

您的自定义标签可能如下所示：

    const MyLabel = props => {
      const x = props.scale.x(props.x);
      const y = props.scale.y(props.y)
      return <VictoryLabel {...props} x={x} y={y}/>
    }

你会像这样使用它：

    <VictoryChart>
      <MyLabel x={10} y={10} />
    </VictoryChart>

VictoryLabel 坐标与 VictoryChart 域不匹配

VictoryLabel coordinates don't match VictoryChart domain

react-native

victory-charts

victory-native