Диаграммы пользовательского интерфейса Kendo - отображать текст вместо значения в метках yAxis

Есть ли способ отобразить метку, отличную от значения на оси значений в диаграмме кендо?

Я хочу, чтобы метки правого изображения вместо левого (оригинала).

введите здесь описание изображения

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


kendo-ui kendo-chart
person Emanuel Saramago    schedule 26.04.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Есть - шаблоны это то, что вы ищете. Однако из вашего вопроса невозможно точно определить, как выполнить то, что вы хотите, поскольку нет кода/или объяснения того, откуда берутся ваши альтернативные значения. Тем не менее, ниже приведен один из способов настройки этих меток.

Пример додзё: https://dojo.telerik.com/OsuWirih

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

Подробнее здесь: https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/yaxis.labels#yaxislabelstemplate

РЕДАКТИРОВАТЬ:

Из вашего комментария я до сих пор не уверен, что заставляет 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",
      data: [ [1, 2] ]
    }
  ],
  yAxis: {
    labels: {
      template: "#: dict[value] #"
    }
  }
});
</script>

и в додзё: https://dojo.telerik.com/EpElOFAy/2

person G_P    schedule 26.04.2021
comment
Спасибо, @G_P. Я добавил код с массивом меток (const yAxisLabels). Что я хочу сделать, так это заменить значения (1, 2, 3...) метками (A, B, C...) - person Emanuel Saramago; 26.04.2021
comment
Добавлен еще один пример... надеюсь, что это поможет - person G_P; 26.04.2021