react-native - 如何将动态数据加载到 react-native-chart-kit StackedBar 图表？

Question

我正在尝试为动态数据放置堆栈条形图，并且 data.data 数组中的行数会有所不同。我无法正确看到图表之外的内容。有人能说出这有什么问题吗？

我也不能直接在图中使用状态变量。

    const data = {
        "barColors": ["#dfe4ea", "#ced6e0"],
        "data": [["99378", "8032"], ["40704", "3895"]],
        "labels": ["01/10/2020", "10/10/2020"],
        "legend": ["AMOUNT", "TAX"]
    }
    
    const graphStyle = {
        marginVertical: 8
    }
    
    const chartConfig = {
        backgroundGradientFrom: "#1E2923",
        backgroundGradientFromOpacity: 0,
        backgroundGradientTo: "#08130D",
        backgroundGradientToOpacity: 0.5,
        color: (opacity = 1) => `rgba(26, 255, 146, ${opacity})`,
        strokeWidth: 2, // optional, default 3
        barPercentage: 0.5,
        useShadowColorFromDataset: false, // optional
        style: {
            borderRadius: 16
        },
    };
    
    <StackedBarChart
        style={graphStyle}
        data={data}
        width={devicewidth}
        height={height}
        chartConfig={chartConfig}
    />

图表如下

Answer 1

只是改变

const data = {
    "barColors": ["#dfe4ea", "#ced6e0"],
    "data": [["99378", "8032"], ["40704", "3895"]],
    "labels": ["01/10/2020", "10/10/2020"],
    "legend": ["AMOUNT", "TAX"]
}

至

const data = {
    "barColors": ["#dfe4ea", "#ced6e0"],
    "data": [[99378, 8032], [40704, 3895]],
    "labels": ["01/10/2020", "10/10/2020"],
    "legend": ["AMOUNT", "TAX"]
}

data props 接受数字数组，而不是字符串。