剑道在标签中显示“，”和“％”

Posted 2023-05-07

【中文标题】剑道在标签中显示“，”和“％”

【英文标题】：kendo showing "," and "%" in labels

【发布时间】：2015-02-07 19:06:57

【问题描述】：

我正在使用剑道，并在条形图上显示标签。现在使用以下代码，标签将数字显示为“25.4”。我需要标签在数字后显示百分号，并认为我可以在“模板：”#= value#“”的某个地方的标签模板部分执行此操作，但添加 % 或 '%' 或“%” 不会工作。 如何让 % 与标签上的数字一起显示？

系列默认值： 类型：“列”， 标签： 可见：真实， 背景：“透明”， 模板：“#= 值#” ,

在另一个图表中，我需要做类似的事情，但将标签显示为数字，但在适当的位置使用逗号。有人也知道该怎么做吗？前任。我需要 32,123 而不是 32123。

【参考方案1】：

我建议不要使用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>

【讨论】：

效果很好，谢谢。你知道如何在显示的数字中添加逗号吗？

完美，谢谢。您知道如何在显示的数字中添加逗号吗？这是我的脚本。我正在尝试在数据部分的 4 位数字上添加逗号，以便当它显示时它是“1,592”而不是“1592” seriesDefaults: type: "column", labels: visible: true, background: "透明”，模板：“$#= value#”，系列：[名称：“当前”，数据：[1592、3049、1488、1287、1419、1119、1641、1656]，名称：“去年”，数据：[1729, 1564, 1337, 933, 1352, 1201, 1659, 1396] ]，工具提示： 模板：“#= series.name #: $#= value #”

您可以尝试将format 定义为0:###,###.00%。这将为千位打印,，并将强制打印为十进制数字。如果您不想强制使用十进制数字，您可以考虑0:###,###.##% 甚至0:###,###%。