如何在React Syncfusion图表中优雅修改Y轴标签值？

问题背景 #

我使用React和Syncfusion构建了图表，目前通过在useEffect中查找DOM元素ID手动修改DOM的方式实现Y轴标签值的修改，但不清楚最佳实现方式，当前代码如下：

import React, { useEffect } from "react";
import { skillsIcon } from "../data/dummy";
import { GoPrimitiveDot } from "react-icons/go";
import { Stacked, Pie, Button, SparkLine,BackendStacked } from "../components";
import {
  earningData,
  SparklineAreaData,
  ecomPieChartData,
} from "../data/dummy";
import { useStateContext } from "../contexts/ContextProvider";

const Skills = () => {
  const {
    screenSize,
    setScreenSize,
  } = useStateContext();

  useEffect(() => {
    document.getElementById("charts1_AxisLabel_4").innerHTML = "Medior"
    document.getElementById("charts1_AxisLabel_3").innerHTML = ""
    document.getElementById("charts1_AxisLabel_2").innerHTML = "Junior"
    document.getElementById("charts1_AxisLabel_1").innerHTML = ""
    document.getElementById("charts1_AxisLabel_0").innerHTML = "Entry"

  }, [screenSize,setScreenSize]);

  return (
    <div>
      <h1 className="text-center text-4xl my-10 font-bold">Skills</h1>
      <div className="flex m-3 flex-wrap justify-center gap-1 items-center">
        {skillsIcon.map((skill) => (
          <div
            key={skill.title}
            className="bg-white dark:text-gray-200 dark:bg-secondary-dark-bg md:w-40
       p-4 pt-9 rounded-2xl"
          >
            <button
              type="button"
              style={{ color: skill.iconColor, backgroundColor: skill.iconBg }}
              className="text-2xl opacity-0.9 rounded-full p-4 hover:drop-shadow-xl"
            >
              {skill.icon}
            </button>
            <p className="mt-3">
              <span className="text-lg font-semibold">{skill.title}</span>
              <span className={`text-sm text-${skill.pcColor} ml-2`}>
                {skill.percentage}
              </span>
            </p>
          
          </div>
        ))}
      </div>
      <div className="flex gap-10 flex-wrap justify-center">
        <div
          className="bg-white dark:text-gray-200
         dark:bg-secondary-dark-bg m-3 p-4 rounded-2xl md:w-780"
        >
          <div className="">
            <h2 className="font-semibold text-center text-xl ">
              Skills - graph
            </h2>
          </div>

          <div className="mt-10 flex gap-10 flex-wrap justify-center">
            <div>
              <Stacked height="420px" width="580px" />
            </div>

     
            <div>
              <BackendStacked height="420px" width="580px" />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Skills;

最佳实现方式 #

直接操作DOM是不推荐的，Syncfusion图表提供了原生的配置项和事件来自定义轴标签，更可靠且符合React的状态管理逻辑，主要有以下几种方法：

1. 静态自定义：使用labelFormat配置项 #

如果Y轴标签是固定的数值映射关系（比如0对应Entry、2对应Junior、4对应Medior），可以直接在图表的Y轴配置中通过labelFormat结合格式化函数实现：

假设你的Stacked组件内部封装了Syncfusion的ChartComponent，修改其Y轴配置：

// 在Stacked组件的代码中
import { ChartComponent, PrimaryYAxis } from '@syncfusion/ej2-react-charts';

const Stacked = ({ height, width }) => {
  const yAxisLabelFormatter = (value) => {
    const labelMap = {
      0: 'Entry',
      2: 'Junior',
      4: 'Medior',
      1: '',
      3: ''
    };
    return labelMap[value] || value;
  };

  return (
    <ChartComponent height={height} width={width}>
      <PrimaryYAxis labelFormat={yAxisLabelFormatter} />
      {/* 其他图表系列、配置 */}
    </ChartComponent>
  );
};

2. 动态自定义：使用labelRender事件 #

如果需要根据组件状态动态调整标签，可以利用Syncfusion图表的labelRender事件，在事件回调中修改标签文本：

// 在Stacked组件的代码中
import { ChartComponent, PrimaryYAxis } from '@syncfusion/ej2-react-charts';

const Stacked = ({ height, width }) => {
  const handleYAxisLabelRender = (args) => {
    const labelMap = {
      0: 'Entry',
      2: 'Junior',
      4: 'Medior',
      1: '',
      3: ''
    };
    // 替换默认标签文本
    args.text = labelMap[args.value] || args.text;
  };

  return (
    <ChartComponent 
      height={height} 
      width={width}
      onPrimaryYAxisLabelRender={handleYAxisLabelRender}
    >
      <PrimaryYAxis />
      {/* 其他图表系列、配置 */}
    </ChartComponent>
  );
};

3. 组件复用：通过props传递标签映射 #

如果Stacked和BackendStacked是可复用组件，可以通过props将标签映射传递进去，让组件内部应用配置：

在Skills组件中传递props：

<Stacked 
  height="420px" 
  width="580px" 
  yAxisLabelMap={{
    0: 'Entry',
    2: 'Junior',
    4: 'Medior',
    1: '',
    3: ''
  }}
/>
<BackendStacked 
  height="420px" 
  width="580px" 
  yAxisLabelMap={{ /* 后端技能对应的标签映射 */ }}
/>

然后在Stacked组件中接收并使用：

const Stacked = ({ height, width, yAxisLabelMap }) => {
  return (
    <ChartComponent height={height} width={width}>
      <PrimaryYAxis 
        labelFormat={(value) => yAxisLabelMap[value] || value}
      />
      {/* 其他图表系列、配置 */}
    </ChartComponent>
  );
};

不推荐操作DOM的原因 #

• Syncfusion生成的DOM元素ID（如charts1_AxisLabel_4）是内部逻辑生成的，可能随版本更新、图表配置变化而改变，导致代码不稳定。
• 直接操作DOM绕过了React的状态管理机制，容易出现视图与数据不一致的问题。
• 每次screenSize变化都查询并修改DOM，性能不如原生配置项高效。

内容的提问来源于stack exchange，提问作者Milán Nikolics