如何使用MUI X Line Chart渲染局部与完整数据系列

要实现同时渲染完整数据系列和局部高亮数据系列的效果，核心思路是在同一个图表中添加两个独立的折线系列，通过样式区分层级，具体步骤如下：

1. 拆分数据集 #

准备完整数据集和需要高亮的局部数据集，局部数据可以是完整数据的连续子集，也可以是指定的离散数据点：

// 完整数据集
const fullData = [
  { x: 'Jan', y: 100 },
  { x: 'Feb', y: 120 },
  { x: 'Mar', y: 90 },
  { x: 'Apr', y: 150 },
  { x: 'May', y: 130 },
  { x: 'Jun', y: 180 },
];

// 局部高亮数据集（示例：选取Apr到Jun的连续区间）
const partialData = fullData.slice(3);

// 若需高亮离散点，可单独构造：
// const partialData = [
//   { x: 'Feb', y: 120 },
//   { x: 'May', y: 130 },
// ];

2. 配置双折线系列 #

在LineChart中添加两个Line组件，分别对应完整数据和局部数据，通过样式属性区分视觉效果：

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from '@mui/x-charts';

export default function DualSeriesLineChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <LineChart
        data={fullData}
        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="x" />
        <YAxis />
        <Tooltip />
        
        {/* 完整数据系列：淡色细线条，隐藏标记点 */}
        <Line
          type="monotone"
          dataKey="y"
          stroke="#e0e0e0"
          strokeWidth={1}
          dot={false}
          name="完整数据"
        />
        
        {/* 局部数据系列：深色粗线条，显示高亮标记点 */}
        <Line
          type="monotone"
          data={partialData}
          dataKey="y"
          stroke="#1976d2"
          strokeWidth={2}
          activeDot={{ r: 8 }}
          name="局部高亮"
        />
      </LineChart>
    </ResponsiveContainer>
  );
}

3. 关键样式说明 #

• 完整数据系列：使用stroke设置低饱和度颜色，strokeWidth设为1，dot={false}隐藏点，弱化视觉层级
• 局部数据系列：使用高饱和度颜色，strokeWidth设为2，activeDot设置高亮标记，强化视觉焦点
• 通过name属性给两个系列命名，tooltip会自动区分显示

内容的提问来源于stack exchange，提问作者RealGobi