VictoryLabel 坐标与 VictoryChart 域不匹配

问题描述

我在 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,}}
  ></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 或附近。

解决方法

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

正如他们在那里写的那样：

VictoryLabel 上的 x,y,props 对应于 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>