在 VictoryVoronoiContainer 中只显示 VictoryLine 的标签。不要在 VictoryVoronoiContainer 中显示 victoty scatter 的标签

Question

我在 victory js 或 victory chart Lib 中使用 JavaScript。对于这张图表。在 VictoryVoronoiContainer 中只接受一个 victoryline 标签。下面的代码在鼠标指针悬停分散时在 VictoryVoronoiContainer 中呈现两个标签。但是我怎么能只在 VictoryVoronoiContainer 中使用一个 victoryLine 标签。每当鼠标悬停在 scatter.

使用胜利 JS .

import React from "react";
import {
  VictoryChart,
  VictoryLine,
  VictoryAxis,
  VictoryGroup,
  VictoryLabel,
  VictoryScatter,
  VictoryTooltip,
  VictoryVoronoiContainer,
} from "victory";
import * as finalData from "../Data";

function LineChart() {
  const colorData = Object.values(finalData.pieChartColor);
  console.log(colorData);
  const data = Object.entries(finalData.dataStore.dataStore).map(
    ([key, value], index) => {
      return {
        name: key,
        color: colorData[index],
        stage: key,
        data: value.map((item) => {
          return { x: item.Date, y: item.Count, stage: key };
        }),
      };
    }
  );

  return (
    <div>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
        }}
      >
        {data.map((line) => {
          return (
            <div
              key={line.name}
              style={{ display: "flex", alignItems: "center", margin: "10px" }}
            >
              <div
                style={{
                  height: "20px",
                  width: "20px",
                  backgroundColor: line.color,
                  marginRight: "10px",
                }}
              ></div>
              <VictoryLabel text={line.name} style={{ fontSize: 25 }} />
            </div>
          );
        })}
      </div>
      <VictoryChart
        height={300}
        width={350}
        containerComponent={
          <VictoryVoronoiContainer
            labels={({ datum }) => `${datum.stage} : ${datum.y}`}
            labelComponent={
              <VictoryTooltip
                style={{
                  fontSize: 9,
                  fontFamily: "'Roboto', 'Helvetica', 'Arial', 'sans-serif'",
                }}
                flyoutStyle={{
                  stroke: "none",
                  fill: "#f0f0f0",
                }}
              />
            }
          />
        }
        style={{
          parent: {
            height: "100%",
            width: "70%",
          },
        }}
      >
        {data.map((line) => {
          return (
            <VictoryGroup data={line.data}>
              <VictoryLine
                key={line.name}
                style={{
                  data: { stroke: line.color, strokeWidth: 1 },
                }}
              ></VictoryLine>
              <VictoryScatter
                size={2}
                symbol="circle"
                style={{
                  data: { fill: line.color },
                }}
              />
            </VictoryGroup>
          );
        })}
        <VictoryAxis
          style={{
            tickLabels: {
              fontSize: 10,
              fontFamily: "'Roboto', 'Helvetica', 'Arial', 'sans-serif'",
              angle: -45,
              transform: "translate(-15,7)",
            },
          }}
          tickFormat={(x) => x.slice(0, 3) + " " + x.slice(4)}
        />
        <VictoryAxis
          style={{
            tickLabels: {
              fontSize: 10,
              fontFamily: "'Roboto', 'Helvetica', 'Arial', 'sans-serif'",
            },
          }}
          dependentAxis
        />
      </VictoryChart>
    </div>
  );
}

export default LineChart;