我有一个数组
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>
text={point.yValue.toString()}