mui-x 折线图无法呈现部分数据系列和完整数据系列

Question

我无法从我的

stateFullTime

数组中渲染数据，其中前两个元素为空，因为我那些年没有数据。理想情况下，我希望州线系列从 (x: 2011, y: 53.2) 开始。但是，当我将鼠标悬停在图表上时，出现以下错误：

not-found-boundary.js:22 Uncaught TypeError: Cannot read properties of null (reading 'toLocaleString')

page.tsx：

"use client";

import * as React from "react";
import { LineChart } from "@mui/x-charts/LineChart";

const suburbFullTime = [50, 53.1, 52.5, 53.5, 53.2];
const stateFullTime = [null, null, 53.2, 57.2, 57.1];
const australiaFullTime = [55.1, 55.3, 54.9, 57.2, 56.8];

export default function FullTimeEmploymentLineGraph() {
    return (
        <div>
            <div className="flex flex-col justify-center">
                <h1 className="mt-4 text-lg text-center font-bold">Full-time employment</h1>
                <div className="mx-auto -mt-10">
                    <LineChart
                        xAxis={[
                            {
                                data: ["2001", "2006", "2011", "2016", "2021"],
                            },
                        ]}
                        series={[
                            {
                                id: "suburb",
                                label: "Suburb",
                                data: suburbFullTime,
                                showMark: false,
                                curve: "natural",
                            },
                            {
                                id: "state",
                                label: "State",
                                data: stateFullTime,
                                showMark: false,
                                curve: "natural",
                            },
                            {
                                id: "australia",
                                label: "Australia",
                                data: australiaFullTime,
                                showMark: false,
                                curve: "natural",
                            },
                        ]}
                        sx={{
                            "--ChartsLegend-itemWidth": "70px",
                            "--ChartsLegend-itemMarkSize": "10px",
                            "--ChartsLegend-labelSpacing": "5px",
                            "--ChartsLegend-rootSpacing": "20px",
                        }}
                        legend={{
                            direction: "row",
                            position: {
                                vertical: "top",
                                horizontal: "middle",
                            },
                        }}
                        width={600}
                        height={400}
                        margin={{ left: 70 }}
                    />
                </div>
            </div>
        </div>
    );
}

我尝试过使用

null

或

NaN

。使用

0

有效，但会显示带有 x=2001 和 x=2006 处标记的折线图，这不是我想要显示的。

已查看 mui-x GH 上的开放/已关闭问题，但没有运气。

Answer 1

我已经与该软件包的维护者确认，从 v6.0.0-alpha.16 开始还不可能，但这是他们正在考虑的事情。