React Recharts，chromium 和 firefox 的区别

Question

我有一个带有时间序列的堆积面积图。 我正在规范化数据以始终加起来为 100%。 对于一些特定的数据，图表中断，并且在 firefox 中以相同的方式中断，直到我将scale="time"添加到XAxis 。 现在这就是我所拥有的：

<AreaChart data={percentData.sort((a, b) => a.name >= b.name)}>
    <defs>
        {colors.map((c, i) => (
            <linearGradient id={`graphColor${i}`} x1="0" y1="0" x2="0" y2="1" key={c}>
                <stop offset="5%" stopColor={c} stopOpacity={1} />
                <stop offset="95%" stopColor={c} stopOpacity={0.5} />
            </linearGradient>
        ))}
        {customGradients()}
    </defs>
    <XAxis
        dataKey="name"
        type="number"
        domain={[MIN, MAX]}
        scale="time"
        tickFormatter={dateFormatter}
        ticks={tickArray}
        tickCount={5}
    >
        <Label value="Date" position="bottom" style={{ textAnchor: 'middle' }} />
    </XAxis>
    <YAxis ticks={[0, 25, 50, 75, 100]} domain={[0, 100]} unit="%" type="number">
        <Label angle={-90} value="Percentage" position="insideLeft" style={{ textAnchor: 'middle' }} />
    </YAxis>
    <Tooltip content={<CustomTooltip tickFormatter={dateFormatter} />} />
    <CartesianGrid strokeDasharray="3 3" />
    {tab
        && tab.keys
            .sort()
            .map((k, i) => (
                <Area
                    type="monotone"
                    dataKey={k}
                    stroke={tab.data[`${k}color`] || getColorForCurrentIndex(i)}
                    fillOpacity={1}
                    fill={
                        tab.data[`${k}color`]
                            ? `url(#graphColor${k}color)`
                            : `url(#graphColor${getColorIndex(i)})`
                    }
                    key={k}
                    stackId="1"
                />
            ))}
</AreaChart>

chromium 控制台输出如下：

Error: <rect> attribute x: Expected length, "NaN".
Error: <rect> attribute width: Expected length, "NaN".

我为 x 坐标使用 unix 时间戳，它们是正确的数字实例。

这是 firefox 中的结果： Firefox 堆叠时间序列面积图

Chromium 上的首次渲染： Chromium 堆叠时间序列面积图首次渲染

在 Chromium 上重新渲染后： Chromium 堆叠时间序列面积图第二次渲染

感谢您提供任何帮助，努力解决这个问题。 谢谢！

我尝试了 recharts 文档中提供的百分比面积图示例，结果相同。

Answer 1

原来我没有正确排序我的数据，即使它们是传递给数字轴的数字，排序数据数组解决了这个问题：

sort((a, b) => a.name >= b.name) => sort((a, b) => a.name - b.name)