如何在 react-native-svg-charts 上的条形图中按 onPress 和其他颜色

Question

我想在点击图表的地方放置一个事件，并以不同的方式表达图表的颜色。为此，对图表数据进行了处理，但处理选项没有正常工作。

并且在处理数据后，无法将额外的 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>
        ...
    );

Console.log

[{"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}]

不显示图表截图

package.json

{
 "react-native-svg": "^12.1.0",
 "react-native-svg-charts": "^5.4.0",
}

你如何解决这个问题？

Answer 1

我在查看库源代码时发现了问题。

    calcAreas(x, y) {
        const { horizontal, data, yAccessor } = this.props

        const _data = data.map((obj) => {
            const { svg = {} } = obj
            return {
                ...obj,
                data: obj.data.map((item) => {
                    if (typeof item === 'number') {
                        return {
                            value: item,
                            svg,
                        }
                    }

                    return {
                        ...item,
                        svg: {
                            ...svg,
                            ...item.svg,
                        },
                        value: yAccessor({ item }), // 
                    }
                }),
            }
        })

这部分是问题所在。我正在添加一个 value，但它是新定义的。

所以我添加了 yAccessor 选项。

    const pieData = dataList.map((value, index) => ({
        value,
        svg: {
            fill: getFill(index),
            onPress: () => console.log(`${value}-${index}`)
        },
        key: `bar-${index}`
    }));

                        <BarChart
                            style={{ flex: 9, width: apx(750) }}
                            spacingInner={0.2}
                            data={pieData}
                            gridMin={Y_AXIS_MIN}
                            gridMax={Y_AXIS_MAX}
                            yAccessor={({ item }) => item.value}
                            animate
                        >
                            {pieData.map((_, i) => (
                                <Tooltip index={i} />
                            ))}
                        </BarChart>

做得很好

如何在 react-native-svg-charts 上的条形图中按 onPress 和其他颜色

How to onPress and other Color in barChart on react-native-svg-charts

javascript

react-native

react-native-svg

react-native-svg-charts