2

我无法弄清楚如何在剑道 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 数据源中按年份排序，年份的排序也不正确。

任何帮助，将不胜感激。

4

2 回答 2

0

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

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

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

于 2014-05-27T10:19:35.117 回答
0

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

 <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>
于 2016-11-07T17:26:54.673 回答