Kendo UI折线图排序顺序
[英]Kendo UI line chart sort order
问题描述
I can't work out how to get the categories ordering correctly on the x-axis in a kendo UI line chart. 
我无法弄清楚如何在Kendo UI折线图中的x轴上正确排序类别。 Here's my example: 这是我的示例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="chart"></div>
<script src="js/thirdParty/jquery.js"></script>
<script src="js/thirdParty/kendo.all.min.js"></script>
<script>
$(function () {
var data,
dataSource;
data = [{
type: "C1",
amount: 100,
year: 2008
}, {
type: "C2",
amount: 120,
year: 2008
}, {
type: "C2",
amount: 50,
year: 2009
}, {
type: "C1",
amount: 10,
year: 2010
}, {
type: "C1",
amount: 120,
year: 2011
}, {
type: "C2",
amount: 50,
year: 2011
}];
dataSource = new kendo.data.DataSource({
data: data,
group: {field: "type"},
sort: { field: "year" }
});
$("#chart").kendoChart({
dataSource: dataSource,
series: [{
type: "line",
field: "amount",
categoryField: "year",
name: "#= group.value #"
}],
})
});
</script>
</body>
</html>
and here's a screen shot of what the output looks like: 这是输出的屏幕快照：
As you can see the years are ordered incorrectly even though the data is in year order and I've specified to sort on year in the kendo data source. 如您所见，即使数据按年顺序排列，并且我已在kendo数据源中指定按年排序，但年份的排序也不正确。
Any help would be appreciated. 任何帮助，将不胜感激。
2 个解决方案
解决方案1
0 2014-05-27 10:19:35
You need to convert the years from a Number to date, eg: 您需要将年份从数字转换为日期，例如：
data = [{
type: "C1",
amount: 100,
year: new Date(2008, 0, 1);
}, {
type: "C2",
amount: 120,
year: new Date(2009, 0, 1)
}, ... // etc.
You can then even further define baseUnitStep steps. 然后，您甚至可以进一步定义baseUnitStep步骤。
解决方案2
0 2016-11-07 17:26:54
You need to add a data bound to your chart like this: 您需要像这样添加绑定到图表的数据：
<script>
$(function () {
var data,
dataSource;
data = [{
type: "C1",
amount: 100,
year: 2008
}, {
type: "C2",
amount: 120,
year: 2008
}, {
type: "C2",
amount: 50,
year: 2009
}, {
type: "C1",
amount: 10,
year: 2010
}, {
type: "C1",
amount: 120,
year: 2011
}, {
type: "C2",
amount: 50,
year: 2011
}];
dataSource = new kendo.data.DataSource({
data: data,
group: {field: "type"},
sort: { field: "year" }
});
$("#chart").kendoChart({
dataSource: dataSource,
series: [{
type: "line",
field: "amount",
categoryField: "year",
name: "#= group.value #"
}],
dataBound: function(e) {
var axis = e.sender.options.categoryAxis;
axis.categories = axis.categories.sort();
}
})
});
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.