Kendo-UI中的X軸格式
[英]X-Axis Format in Kendo-UI
問題描述
我已經開始使用Telerik Kendo。 我已經顯示了一些數據。 但是，X軸以當前格式可讀。 如何格式化？
<base href="http://demos.telerik.com/kendo-ui/line-charts/date-axis">
<script src="http://cdn.kendostatic.com/2015.1.408/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>
<body>
<div id="example">
<div class="demo-section k-content">
<div id="chart"></div>
</div>
</div>
</div>
<script>
var stats = [
{ x: 0, y: 0 },
{ x: -3.88770423666098, y: 945.987507963258 },
{ x: -4.24922990437403, y: 985.985280150689 },
{ x: -2.91182688405784, y: 1080.9534171457 },
{ x: 1.90405053850085, y: 1175.79962223412 },
{ x: 7.80045299498725, y: 1270.59074063256 },
];
function createChart() {
$("#chart").kendoChart({
title: {
text: "Units sold"
},
dataSource: {
data: stats
},
series: [{
type: "line",
field: "x",
categoryField: "y"
}],
});
}
$(document).ready(createChart);
$("#example").bind("kendo:skinChange", createChart);
</script>
</div>
</body>
這是jsfiddle： http : //jsfiddle.net/nDS3S/23/
1 個解決方案
解決方案1
1 已采納 2015-04-09 22:07:24
您可以使用面積圖並設置標簽格式以適合您的需求：
function createChart() {
$("#chart").kendoChart({
title: {
text: "Units sold"
},
dataSource: {
data: stats
},
categoryAxis: {
labels: {
step: 10,
format: "n2"
},
},
series: [{
type: "area",
line: {
style: "smooth"
},
field: "x",
categoryField: "y"
}],
});
}
我將類型設置為area ，將線型設置為smooth ，將labels to skip 10 positions ，並顯示two decimal digits 。
我已經更新了你的小提琴
謝謝。
Kendo UI圖表X軸，以小時為單位
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.