如何实现Angular Kendo Charts X轴标签的自定义格式化需求

解决方案 #

你可以通过判断当前标签的索引是否为最后一个，再额外添加背景矩形元素实现需求，修改后的代码如下：

// 先从对应依赖导入需要的绘图元素，这里以Angular版本为例
import { Rect, Group, Path } from '@progress/kendo-drawing';
import { AxisLabelVisualArgs } from '@progress/kendo-angular-charts';

xAxisLabelRenderer(e: AxisLabelVisualArgs) {
    const defaultLabel = e.createVisual();
    const group = new Group();
    const bbox = defaultLabel.bbox();
    // 背景框内边距，可根据设计需求调整
    const padding = 4;

    // 保留你原有下划线渲染逻辑
    const path = new Path({
        stroke: {
            color: 'red',
            width: 1,
        },
    });
    path.moveTo(bbox.bottomLeft()).lineTo(bbox.bottomRight());

    // 判断当前是否为最后一个标签
    const axisConfig = e.sender.options.categoryAxis;
    const totalLabels = Array.isArray(axisConfig) 
        ? axisConfig[e.axis.index].categories.length 
        : axisConfig.categories.length;
    if (e.index === totalLabels - 1) {
        // 创建背景矩形
        const background = new Rect([
            bbox.origin.x - padding,
            bbox.origin.y - padding
        ], [
            bbox.size.width + padding * 2,
            bbox.size.height + padding * 2
        ], {
            fill: {
                color: '#f0f0f0', // 自定义背景色
                opacity: 0.9
            },
            stroke: {
                color: '#666', // 自定义边框色
                width: 1
            },
            cornerRadius: 3 // 可选，添加圆角效果
        });
        // 先添加背景，保证文字显示在背景上层
        group.append(background);
    }

    // 加入原有标签和下划线元素
    group.append(defaultLabel, path);

    return group;   
}

补充说明 #

背景的颜色、透明度、圆角、内边距等参数都可以根据你的设计参考图自行调整，适配你需要的最终效果。

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