3

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

seriesDefaults：{类型：“列”，标签：{可见：真，背景：“透明”，模板：“#=值#”}}，

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

4

1 回答 1

2

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>

于 2014-12-09T22:19:08.887 回答