我想放置一个事件,我点击图表并以不同的方式表达图表的颜色。为此,已处理图表数据,但已处理选项无法正常工作。
并且在处理完数据后,无法在图表中插入额外的 SVG。发生了错误。所以我已经注释掉了。
const getFill = (index: number) => {
if (index > 30) return "purple";
if (index > 20) return "blue";
if (index > 10) return "green";
return "red";
};
const pieData = dataList.map((value, index) => ({
value,
svg: {
fill: getFill(index)
},
key: `bar-${index}`
}));
console.log(pieData);
return (
...
<BarChart
style={{ flex: 9, width: apx(750) }}
spacingInner={0.2}
data={pieData}
gridMin={Y_AXIS_MIN}
gridMax={Y_AXIS_MAX}
// svg={{ fill: "red" }}
animate
>
{/* {pieData.map((_, i) => (
<Tooltip index={i} />
))} */}
</BarChart>
...
);
控制台日志
[{"key": "bar-0", "svg": {"fill": "red"}, "value": 4000}, {"key": "bar-1", "svg": {"fill": "red"}, "value": 4000}, {"key": "bar-2", "svg": {"fill": "red"}, "value": 4000}, {"key": "bar-3", "svg": {"fill": "red"}, "value": 4000}, {"key": "bar-4", "svg": {"fill": "red"}, "value": 4000}, {"key": "bar-5", "svg": {"fill": "red"}, "value": 4000}, {"key": "bar-6", "svg": {"fill": "red"}, "value": 4000}, {"key": "bar-7", "svg": {"fill": "red"}, "value": 4000}, {"key": "bar-8", "svg": {"fill": "red"}, "value": 4000}, {"key": "bar-9", "svg": {"fill": "red"}, "value": 4000}, {"key": "bar-10", "svg": {"fill": "red"}, "value": 4000}, {"key": "bar-11", "svg": {"fill": "green"}, "value": 4000}, {"key": "bar-12", "svg": {"fill": "green"}, "value": 4000}, {"key": "bar-13", "svg": {"fill": "green"}, "value": 4000}]
不显示图表截图
- 包.json
{
"react-native-svg": "^12.1.0",
"react-native-svg-charts": "^5.4.0",
}
你怎么能解决这个问题?