VictoryLabel 显示不在victory-native（React Native）中工作

Question

在 VictoryPie 图中需要使用 CustomLabel 显示 VictoryTooltip 和 VictoryLabel 但 CustomLabel 组件仅显示 VictoryLabel 而不显示 VictoryTooltip

VictoryTooltip 和 VictoryLabel 可以直接使用 labelComponent 道具
示例： labelComponent={<VictoryTooltip />} 和 labelComponent={<VictoryLabel />}

这里是代码

import React from 'react'
import { StyleSheet, View, Text } from 'react-native'
import {
 VictoryChart,
 VictoryTheme,
 VictoryPie,
 VictoryAxis,
 VictoryTooltip,
 VictoryLabel,
} from 'victory-native'
import { useSelector } from 'react-redux'
import { useTranslation } from 'react-i18next'
import Svg, {G} from 'react-native-svg'

// This is CustomLabel which include VictoryLabel and VictoryTooltip
const CustomLabel = (props) => {
const { datum, text, y, style } = props
const { t, i18n } = useTranslation()
const selectedLanguage = i18n.language
return (
  <G>
    <VictoryLabel
      {...props}
      text={`${datum.displayName[selectedLanguage]} [${datum.percent.toFixed(0)}%]`}
    />
    <VictoryTooltip
      {...props}
      label={`${text}\n`}
      renderInPortal={false}
      x={200} y={250}
      orientation="top"
      pointerLength={0}
      cornerRadius={50}
      flyoutWidth={100}
      flyoutHeight={100}
      flyoutStyle={{ fill: "red" }}
    />
  </G> 
 )
}

const Chart = ({pieAnalysisData}) => {
const { minusTags } = useSelector((state) => state.settings)
const { t, i18n } = useTranslation()
const selectedLanguage = i18n.language
return (
  <View style={styles.container}>
    <View>
        <VictoryChart
          padding={{ top: 0, bottom: 10, right: 110, left: 110 }}
          theme={VictoryTheme.material}
        >
          <VictoryPie
            data={pieAnalysisData.minusData || []}
            labels={({ datum }) => {
              let label = ''
              for(let i of datum.tags) {
                let key = Object.keys(i)[0]
                label = label + '\n' + `${minusTags[selectedLanguage][key]}: [${i[key].toFixed(0)}%]`
              }
              return label
              }                    
            }
            padding={0}
            innerRadius={1}
            labelRadius={105}
            padAngle={1}
            animate={{
              duration: 2000,
            }}
            labelComponent={<CustomLabel />}
          />
        </VictoryChart>
    </View>
  </View>
 )
}

export default Chart

这是没有显示工具提示的 ios 模拟器的屏幕截图

Answer 1

通过将VictoryVoronoiContainer 传递为containerComponent 属性在VictoryChart 中显示工具提示。

containerComponent={
   <VictoryVoronoiContainer/>
}