无法在胜利栏上渲染文本

Question

我有一个数组

graphData = [{"color": "#FFD710", "percentage": 4.5773, "symbol": "Symbol1"}, {"color": "#808000", "percentage": 5.2791, "symbol": "Symbol2"}]

。 我想使用胜利本机在条形图中每个条形上方渲染此数组中每个项目的百分比。我尝试参考他们的 github 页面上有关此问题的文档

https://github.com/FormidableLabs/victory-native-xl/issues/318 并实现了以下代码，但随后我收到一条错误消息

Property yKeys doesn't exist

这是我的代码的参考。任何帮助和建议将不胜感激！！

const GRAPH_COLORS = [
  '#FFD710',
  '#808000',
  '#006400',
  '#708090',
  '#d62728',
  '#FF7F50',
  '#1f88b4',
  '#9932CC',
  '#FF4500',
  '#FFA07A',
  '#20B2AA',
  '#00FF7F',
  '#4682B4',
  '#FF1493',
  '#00BFFF',
  '#FFD700',
  '#FF69B4',
  '#8A2BE2',
  '#FF8C00',
];
const graphData = [{"color": "#FFD710", "percentage": 4.5773, "symbol": "Symbol1"}, {"color": "#808000", "percentage": 5.2791, "symbol": "Symbol2"}]
<CartesianChart
  data={graphData}
  xKey="symbol"
  yKeys={['percentage']}
  domainPadding={{left: 30, right: 30, top: 30, bottom: 20}}
  axisOptions={{
   font,
  }}>
     {({points, chartBounds}) => {
       if (!points) {
         return null;
       }
       return points?.percentage.map((point, index) => {
         return (
           <Bar
             key={index}
             chartBounds={chartBounds}
             points={[point]}
             animate={{ type: 'spring' }}
             roundedCorners={{
              topLeft: 0,
              topRight: 0,
             }}
             barCount={25}
             color={GRAPH_COLORS[index]}>

              <SkiaText
                color={point.yValue >= 10 ? '#07B419' : '#8B95A1'}
                font={font}
                text={yKeys}
               />  
               
           </Bar>  
          );
        });
      }}
  </CartesianChart>

Answer 1

text={point.yValue.toString()}