标签: victory-scatter

自定义 Victory Scatter 的 dataComponent 以使用图标而不是 React Native 中的默认圆圈

我想在 Victory Scatter 上显示图标,而不是 React Native 中的默认圆圈。我尝试使用下面的代码,但无论任何给定的 x 和 y 点如何,图标都放置在左上角。图标不是根据给定的 x 和 y 点放置的。需要帮助找到我的代码问题以修复错误。

下面是代码和屏幕截图。

import {Svg, Image} from 'react-native-svg'
class DataPoint extends React.Component {
  render() {
    const {x, y} = this.props
    return (
      <Svg x={x} y={y} width="20" height="20">
        <Image
          width="20"
          height="20"
          // eslint-disable-next-line max-len
          xlinkHref="https://s3.amazonaws.com/feedbackhouse-media-development/static/images/profie_image_placeholder/596e4f5df3be5b1ff99461c3"
        />
      </Svg>
    )
  }
}

 <VictoryScatter
        data={[
          {
            x: 100,
            y: 100
          }
        ]}
        dataComponent={<DataPoint />}
      />
Run Code Online (Sandbox Code Playgroud)

react-native victory-charts victory-native victory-scatter

4
推荐指数
1
解决办法
2182
查看次数