React Kendo柱状图：如何为X轴标签添加悬停提示？

你猜的没错，确实可以通过categoryAxis.labels的visual方法来实现X轴标签的悬停提示，以下是具体的实现步骤和代码示例：

基础实现：利用原生HTML title属性 #

这种方式最简单，直接在自定义标签元素上添加title属性，浏览器会自动显示原生悬停提示：

import { Chart } from '@progress/kendo-react-charts';

const ChartComponent = () => {
  const categoryAxis = {
    categories: ['分类1', '分类2', '分类3', '分类4'],
    labels: {
      visual: (e) => {
        // 创建文本元素并设置布局参数
        const textElement = e.createText({
          text: e.text,
          x: e.rect.x,
          y: e.rect.y + e.rect.height / 2,
          align: 'center',
          valign: 'middle'
        });
        // 给文本元素添加title属性，可直接用标签文本或自定义提示内容
        textElement.options.title = `查看${e.text}详情`;
        return textElement;
      }
    }
  };

  const series = [
    { data: [10, 20, 15, 25], type: 'column' }
  ];

  return (
    <Chart
      series={series}
      categoryAxis={categoryAxis}
    />
  );
};

export default ChartComponent;

进阶实现：自定义样式的Tooltip #

如果需要更美观、可定制的提示样式，可以结合Kendo的Tooltip组件，通过给标签元素添加专属类名来绑定提示：

1. 在visual方法中给标签元素添加自定义类名和附加提示数据：

visual: (e) => {
  const textElement = e.createText({
    text: e.text,
    x: e.rect.x,
    y: e.rect.y + e.rect.height / 2,
    align: 'center',
    valign: 'middle',
    // 添加自定义类名用于Tooltip定位
    cssClass: 'x-axis-custom-label'
  });
  // 给元素附加自定义提示内容，后续Tooltip可读取
  textElement.options.tipContent = `${e.text}的月度数据统计`;
  return textElement;
}

2. 在外层包裹Kendo Tooltip组件，绑定到自定义类名：

import { Tooltip } from '@progress/kendo-react-tooltip';

// 组件返回部分
return (
  <Tooltip
    target=".x-axis-custom-label"
    content={(target) => target.options.tipContent}
    // 可根据需要调整提示框的位置、样式等
    position="top"
  >
    <Chart
      series={series}
      categoryAxis={categoryAxis}
    />
  </Tooltip>
);

注：使用自定义Tooltip时，需确保组件能正确识别Chart生成的SVG元素，若出现定位异常可调整Tooltip的filter或showOn配置。

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