показ кендо и % в метках

Я использую кендо и отображаю метки на гистограмме. Прямо сейчас со следующим кодом метки отображают числа как «25,4». Мне нужно, чтобы метки отображали знак процента после числа, и я подумал, что могу сделать это в части шаблона метки где-то в «template:» #= value#», но добавление% или «%» или «%» не работай. Как сделать так, чтобы % отображался вместе с числом на этикетке?

seriesDefaults: { type: "column", labels: { visible: true, background: "transparent", template: " #= value#" } },

В другой диаграмме мне нужно сделать то же самое, но чтобы метки отображались как числа, но с запятыми в соответствующих местах. Кто-нибудь знает, как это сделать? Бывший. Мне нужно 32 123 вместо 32 123.


kendo-ui kendo-chart labels
person Spencer Smith    schedule 09.12.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вместо использования template я бы предложил использовать format (но, конечно, вы можете получить то же самое, используя шаблон).

Примеры:

Печать 25.4 как 25.4% будет

        seriesDefaults: {
          type: "column",
          labels: { 
            visible: true, 
            background: "transparent",
            format : "{0:n}%"
          }
        },

Вы даже можете заставить его отображать определенное количество десятичных цифр, используя для 3 использование format : "{0:n3}%":

        seriesDefaults: {
          type: "column",
          labels: { 
            visible: true, 
            background: "transparent",
            format : "{0:n3}%"
          }
        },

Это когда число хранится в процентах, то есть 25% хранится как 25, а не как 0.25.

$(document).ready(function() {
  $("#chart").kendoChart({
    title: {
      text: "Total Sales (percentage)"
    },
    legend: {
      visible: false
    },
    seriesDefaults: {
      type: "column",
      labels: { 
        visible: true, 
        background: "transparent",
        format : "{0:n2}%"
      }
    },
    series: [
      {
        name: "Serie1",
        data: [10, 20, 25, 30, 10, 5]
      }
    ],
    valueAxis: {
      max: 50,
      line: {
        visible: false
      },
      minorGridLines: {
        visible: true
      }
    },
    categoryAxis: {
      categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
      majorGridLines: {
        visible: false
      }
    }
  });
});
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />

<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>

<div id="chart" style="height: 300px"></div>

person OnaBai    schedule 09.12.2014
comment
Это сработало идеально, спасибо. Знаете ли вы, как я могу добавить запятые в отображаемые числа? - person Spencer Smith; 11.12.2014
comment
отлично, спасибо. Знаете ли вы, как я могу добавить запятые в отображаемые числа? Вот мой сценарий. Я пытаюсь добавить запятые к 4-значным числам в части данных, чтобы при отображении отображалось 1592 вместо 1592 серий по умолчанию: {тип: столбец, метки: {видимый: правда, фон: прозрачный, шаблон: $#= значение# } }, серия: [{ имя: Текущий, данные: [1592, 3049, 1488, 1287, 1419, 1119, 1641, 1656] }, { имя: Прошлый год, данные: [1729, 1564, 1337, 933 , 1352, 1201, 1659, 1396] }], всплывающая подсказка: { template: #= series.name #: $#= value # - person Spencer Smith; 11.12.2014
comment
Вы можете попробовать определить format как {0:###,###.00}%. Это печатает , для тысячи и заставит печатать десятичные цифры. Если вы не хотите принудительно использовать десятичные цифры, вы можете рассмотреть {0:###,###.##}% или даже {0:###,###}%. - person OnaBai; 12.12.2014