Question

我正在尝试构建图表（天x一天中的小时），并使用胜利图表组件在每个“点”上显示图像。我在网站上玩了很多以下内容 https://formidable.com/open-source/victory/gallery/brush-zoom/，并在下面的代码中实现了我想要的功能，仅用React Native和View替换了标签。但是，当我尝试在React Native应用程序中使用它时，“猫”没有被打印在图表区域中，如下图所示。我在做错什么吗？

class CatPoint extends React.Component { 
 render() {
  const {x, y, datum} = this.props; // VictoryScatter supplies x, y and datum
  const cat = datum._y >= 0 ? "" : "";
  return (
    <text x={x} y={y} fontSize={30}>
     {cat}
    </text>
);
}
}

class App extends React.Component {

constructor() {
  super();
  this.state = {
    zoomDomain: { 
      y: [new Date(1982, 1, 1), new Date(1982, 1, 8)],
      x: [6, 15]
    }
  };
}

handleZoom(domain) {
  this.setState({ zoomDomain: domain });
}

render() {
  return (
    <div>
      <VictoryChart 
          responsive={true}
          width={470} 
          height={600} 
          containerComponent={
            <VictoryZoomContainer
              zoomDimension="y"
              zoomDomain={this.state.zoomDomain}
              onZoomDomainChange={this.handleZoom.bind(this)}
            />
      }
    >
        <VictoryAxis dependentAxis crossAxis
            orientation="left"
            scale={{ y: "time" }}
        />
        <VictoryAxis crossAxis
          orientation="top"
          domain={{ x: [0, 24] }}
                style={{ tickLabels: { angle: -60 } }}
                tickFormat={[
                    "0AM",
                    "1AM",
                    "2AM",
                    "3AM",
                    "4AM",
                    "5AM",
                    "6AM",
                    "7AM",
                    "8AM",
                    "9AM",
                    "10AM",
                    "11AM",
                    "12AM",
                    "1PM",
                    "2PM",
                    "3PM",
                    "4PM",
                    "5PM",
                    "6PM",
                    "7PM",
                    "8PM",
                    "9PM",
                    "10PM",
                    "11PM"
                  ]}
        />
        <VictoryScatter
          style={{
            data: { stroke: "tomato" }
          }}
          dataComponent={<CatPoint/>}
          data={[
            { a: 8.10, b: new Date(1982, 1, 1) },
            { a: 10.50, b: new Date(1982, 1, 1) },
            { a: 12.45, b: new Date(1982, 1, 1) },
            { a: 15.30, b: new Date(1982, 1, 1) },
            { a: 17.22, b: new Date(1982, 1, 1) },
            { a: 19.12, b: new Date(1982, 1, 1) }
          ]}
          x="a"
          y="b"
        />
        <VictoryScatter
          style={{
            data: { stroke: "tomato" }
          }}
          dataComponent={<CatPoint/>}
          data={[
            { a: 8.30, b: new Date(1982, 1, 1) },
            { a: 11.50, b: new Date(1982, 1, 1) },
            { a: 13.45, b: new Date(1982, 1, 1) },
            { a: 16.30, b: new Date(1982, 1, 1) },
            { a: 17.32, b: new Date(1982, 1, 1) },
            { a: 18.12, b: new Date(1982, 1, 1) }
          ]}
          x="a"
          y="b"
        />
        <VictoryScatter
          style={{
            data: { stroke: "tomato" }
          }}
          dataComponent={<CatPoint/>}
          data={[
            { a: 8.10, b: new Date(1982, 1, 4) },
            { a: 10.50, b: new Date(1982, 1, 4) },
            { a: 12.45, b: new Date(1982, 1, 4) },
            { a: 15.30, b: new Date(1982, 1, 4) },
            { a: 17.22, b: new Date(1982, 1, 4) },
            { a: 19.12, b: new Date(1982, 1, 4) }
          ]}
          x="a"
          y="b"
        />

      </VictoryChart>

  </div>

Answer 1

我发现了问题所在。在CatPoint组件中，我使用了React Native的标签，并且由于我在“ svg”组件中，因此我应该使用其中的Text标签，如下面的示例所示。：）

import { Text } from "react-native-svg";

VictoryScatter图表未在React Native中的图表区域内呈现dataComponent

1 个答案: