react-native - 胜利原生胜利轴没有渲染最后一个y轴值，反应原生

Question

我有超过 12 个 x 和 y 值的数据，当我得到 13 个值时，它将未渲染。

输出页面 1 看起来像

最后，数据未渲染，

代码重现。 https://snack.expo.io/@mrvictoria/victory-native

标签： react-nativeexpovictory-native

Answer 1

无论如何我解决了这个问题以备将来参考我会写正确的答案，我只需要重新检查胜利原生文档

代码看起来像这样

<VictoryChart
width={1000}
theme={Theme}

labelComponent={<VictoryTooltip renderInPortal={false} />}
domainPadding={{ x: 25 }}
domainPadding={25}>
{/* Horizontal */}
<VictoryAxis
    responsive={false}
    style={{
        ticks: {
            // padding: 12,
        },
        tickLabels: {
            fontSize: 13,
        },
    }}
/>
{/* Vertical */}
<VictoryAxis
    dependentAxis

/>
<VictoryBar
    style={{
        ticks: {
            // padding: 12,
        },
        tickLabels: {
            fontSize: 13,
        },
    }}
    // labelComponent={
    //     <VictoryTooltip
    //         flyoutStyle={{ stroke: "tomato", strokeWidth: 2 }}
    //     />}
    categories={{
        x: [
    "10-06",
    "10-07",
    "10-08",
    "10-09",
    "10-12",
    "10-13",
    "10-14",
    "10-15",
    "10-16",
    "10-19",
    "10-20",
    "10-21"
]
    }}
    data={[
    {
        "x": 1,
        "y": 13
    },
    {
        "x": 2,
        "y": 12
    },
    {
        "x": 3,
        "y": 13
    },
    {
        "x": 4,
        "y": 12
    },
    {
        "x": 5,
        "y": 34
    },
    {
        "x": 6,
        "y": 12
    },
    {
        "x": 7,
        "y": 12
    },
    {
        "x": 8,
        "y": 14
    },
    {
        "x": 9,
        "y": 8
    },
    {
        "x": 10,
        "y": 39
    },
    {
        "x": 11,
        "y": 14
    },
    {
        "x": 12,
        "y": 14
    }
]}
    style={{
        data: { fill: colors.PRIMARY_COLOR_GPA, width: 30 },
        parent: { border: '1px solid #ccc' },
    }}
/>