0

我正在使用胜利堆积面积图并尝试在工具提示上显示标签。但每当我点击图表时，它并没有给出索引。我试图控制它并给出undefined索引值，但它在堆叠条形图中工作正常我使用了相同的代码。它正在使用堆叠条形图，但不适用于堆叠面积图。下面是我的代码

const clickEvent = [
    {
      target: 'data',
      mutation: (props: {
        data: {
          [x: string]: {
            x: React.SetStateAction<string>;
            y: React.SetStateAction<number>;
          };
        };
        index: number;
      }) => {
        ({
          style: {fill: colors.primeColor, width: 14.5},
        });
        console.log(props);
        setDay(props?.data[props.index]?.x);
        setWasteItem(props?.data[props.index]?.y);
      },
    },
    {
      target: 'labels',
      mutation: () => ({active: false}),
    },
  ];

  return (
    <VictoryChart
      theme={VictoryTheme.material}
      height={300}
      containerComponent={<VictoryVoronoiContainer />}
      width={380}>
      <VictoryStack height={200}>
        <VictoryArea
          style={{
            data: {
              fill: colors.orangeOpacity02,
              stroke: colors.orange,
              strokeWidth: 2,
            },
          }}
          data={wastedData}
          labelComponent={
            <VictoryTooltip
              renderInPortal={false}
              style={{fill: colors.orange}}
            />
          }
          labels={() => `${day}: ${wasteItem} Wasted`}
          events={[
            {
              target: 'data',
              eventHandlers: {
                onPressIn: () => {
                  return clickEvent;
                },
              },
            },
          ]}
        />
        <VictoryArea
          style={{
            data: {
              fill: colors.primeColorOpacity05,
              stroke: colors.primeColor,
              strokeWidth: 2,
            },
          }}
          data={usedData}
          labelComponent={
            <VictoryTooltip
              renderInPortal={false}
              style={{fill: colors.primeColor}}
            />
          }
          labels={() => `${day}: ${wasteItem} Used`}
          events={[
            {
              target: 'data',
              eventHandlers: {
                onPressIn: () => {
                  return clickEvent;
                },
              },
            },
          ]}
        />
      </VictoryStack>
      <VictoryAxis
        fixLabelOverlap={true}
        tickValues={['Aug 1', 'Aug 15', 'Aug 30']}
        style={{
          axis: {stroke: 'transparent'},
          grid: {stroke: 'transparent'},
          tickLabels: {
            fontSize: 12,
            paddingLeft: 10,
          },
        }}
      />
      <VictoryAxis
        dependentAxis
        tickValues={[0, 10, 20, 30]}
        orientation="left"
        style={{
          tickLabels: {fontSize: 12},
          axis: {stroke: 'transparent'},
        }}
      />
    </VictoryChart>
  );
};

谁能告诉我该代码有什么问题？

4

1 回答 1

0

data事件的道具中没有调用键。

eventHandlers 应该作为一个对象，其键是标准事件名称（例如，onClick），其值是事件回调。使用触发事件的单个元素的道具调用回调。例如，当 bar 上发生 click 事件时，提供给 onClick 处理程序的 props 对象将包括特定于该单独 bar 的 props，例如datum、index、style等。事件处理程序回调的返回值可用于改变其他元素。

您可以使用datum

于 2022-02-25T10:39:14.840 回答