Kendo UI 图表 - 在 yAxis 标签中显示文本而不是值

问题描述

Kendo Chart中除了数值轴中的数值，还有什么方法可以显示标签？

我想要的是右侧图片的标签，而不是左侧图片的标签（原始图片）。

<!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>

// these are the labels I want to replace for the number values.
const yAxisLabels = ["A","B","C","D","E"];

$("#chart").kendoChart({
  series: [
    {
      type: "line",data: [2,3,4]
    }
  ],valueAxis: {
    min: 1,max: 5,majorUnit: 1
  }
});
</script>
</body>
</html>

解决方法

有 - 模板就是您要寻找的。但是，从您的问题来看，没有办法帮助您准确地完成您想要的事情，因为没有代码/或解释您的替代值的来源。也就是说，以下是自定义这些标签的一种方法。

道场示例：https://dojo.telerik.com/OsuWirih

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    {
      type: "scatter",data: [ [1,2] ]
    }
  ],yAxis: {
    labels: {
      template: "X: #: value #"
    }
  }
});
</script>

编辑：

根据您的评论，我仍然不确定是什么促使 A、B、C 替换值。如果基础值与您想要的 A、B、C... 标签一致，这是一种方法来实现它：

<script>
let dict = {0:'A',0.5:'B',1:'C',1.5:'D',2:'E',2.5:'F'};
$("#chart").kendoChart({
  series: [
    {
      type: "scatter",yAxis: {
    labels: {
      template: "#: dict[value] #"
    }
  }
});
</script>

在道场中：https://dojo.telerik.com/EpElOFAy/2

kendo-chart kendo-ui

Kendo UI 图表 - 在 yAxis 标签中显示文本而不是值

问题描述

解决方法

相关问答