Kendo UI 折线图排序顺序答案

【问题标题】：Kendo UI line chart sort orderKendo UI 折线图排序顺序
【发布时间】：2013-08-23 04:13:26
【问题描述】：

我无法弄清楚如何在 kendo UI 折线图中的 x 轴上正确排序类别。这是我的例子：

<!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>

这是输出的屏幕截图：

您可以看到年份排序不正确，即使数据按年份排序并且我已指定在 kendo 数据源中按年份排序。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery telerik kendo-ui

【解决方案1】：

您需要将年份从数字转换为日期，例如：

data = [{
           type: "C1",
               amount: 100,
               year: new Date(2008, 0, 1);
           }, {
               type: "C2",
               amount: 120,
               year: new Date(2009, 0, 1)
           }, ... // etc.

然后您甚至可以进一步定义baseUnitStep 步骤。

【讨论】：

【解决方案2】：

您需要像这样添加绑定到图表的数据：

 <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>

【讨论】：