如何在MUI React Charts中高亮指定X轴对应的标记

核心思路 #

通过状态管理选中的X轴值，动态控制对应标记的颜色，同时给X轴添加点击事件触发状态更新。

具体实现步骤 #

1. 添加状态管理
   用useState钩子记录当前选中的X轴值，初始设为null或者你需要的默认值：

   import { useState } from 'react';
   
   // 组件内部
   const [selectedX, setSelectedX] = useState(null);
   

2. 给X轴添加点击事件
   修改ChartsXAxis，添加onClick事件捕获点击的X轴值，更新状态：

   <ChartsXAxis 
     onClick={(_, event) => {
       // 获取点击的X轴刻度值
       const clickedX = event.value;
       setSelectedX(clickedX);
     }}
   />
   

3. 动态控制标记颜色
   自定义MarkPlot的渲染逻辑，判断当前标记的X值是否与选中值匹配，匹配时设为红色：

   <MarkPlot
     itemProps={({ datum }) => ({
       style: {
         fill: datum.x === selectedX ? 'red' : 'black',
         stroke: datum.x === selectedX ? 'darkred' : 'black',
         r: datum.x === selectedX ? 6 : 4 // 高亮时可放大标记
       }
     })}
   />
   

完整修正代码 #

修正原代码中的语法错误（如xAxis未用{}包裹、series中data后缺少逗号），完整代码如下：

import { useState } from 'react';
import {
  ChartContainer,
  LinePlot,
  MarkPlot,
  ChartsXAxis,
  ChartsYAxis,
} from '@mui/x-charts';

function HighlightableChart() {
  const [selectedX, setSelectedX] = useState(null);

  return (
    <ChartContainer
      width={500}
      height={500}
      series={[
        {
          data: [1,2,3,4,5,6,9,10],
          color: 'black',
          type: 'line',
        },
      ]}
      xAxis={{ data: [2001,2002,2004,2005,2006,2007,2008,2009,2010] }}
    >
      <LinePlot />
      <MarkPlot
        itemProps={({ datum }) => ({
          style: {
            fill: datum.x === selectedX ? 'red' : 'black',
            stroke: datum.x === selectedX ? 'darkred' : 'black',
            r: datum.x === selectedX ? 6 : 4
          }
        })}
      />
      <ChartsXAxis 
        onClick={(_, event) => {
          setSelectedX(event.value);
        }}
      />
      <ChartsYAxis />
    </ChartContainer>
  );
}

export default HighlightableChart;

额外说明 #

• 如果需要默认高亮某个值（比如2005），可以把useState的初始值设为2005：const [selectedX, setSelectedX] = useState(2005)
• 可根据需求调整高亮时的样式，比如标记大小、边框颜色等

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