0

我在 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,
    },
...

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

4

1 回答 1

0

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

正如他们在那里写道：

上面的 x, y, propsVictoryLabel对应的是 svg 坐标空间，而不是数据坐标空间。您可以创建一个自定义标签，使用 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>
于 2021-05-05T13:04:13.610 回答