Kendo UI Chart值轴如何配置自定义文本标签替代原生数值

不需要额外监听图表渲染事件操作DOM修改标签文本，直接通过值轴内置的标签模板配置，就能把原生数值刻度替换为自定义文本。

配置逻辑 #

原示例中值轴的原生刻度序列为 1、2、3、4、5，和预定义的 yAxisLabels = ["A", "B", "C", "D", "E"] 顺序、长度完全匹配。利用刻度值和数组下标的偏移规则（刻度值减1刚好对应数组的0起始索引），在标签回调里返回对应自定义文本即可。

核心配置片段：

valueAxis: {
  min: 1,
  max: 5,
  majorUnit: 1,
  labels: {
    template: (e) => yAxisLabels[e.value - 1]
  }
}

完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default-v2.min.css"/>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
// 待映射的自定义值轴标签数组
const yAxisLabels = ["A", "B", "C", "D", "E"];
$("#chart").kendoChart({
  series: [
    {
      type: "line",
      data: [2, 3, 4]
    }
  ],
  valueAxis: {
    min: 1,
    max: 5,
    majorUnit: 1,
    labels: {
      // 按刻度值匹配对应自定义文本
      template: (e) => yAxisLabels[e.value - 1]
    }
  }
});
</script>
</body>
</html>

常见注意点 #

• 上述映射逻辑的适配前提是值轴刻度从1开始、步进为1，和自定义标签数组的顺序、长度完全对齐
• 如果后续调整值轴的 min/max/majorUnit 参数，需要同步校验刻度值和数组的映射关系，避免出现索引越界导致的标签空白

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