Question

JS Bin

    <div id="example" class="k-content">
        <div class="chart-wrapper">
            <div id="chart"></div>
        </div>
        <script>
            var internetUsers = [ {
                    "Month": "1",
                    "year": "2010",
                    "value": 1
                }, {
                    "Month": "2",
                    "year": "2010",
                    "value": 2
                }, {
                    "Month": "3",
                    "year": "2010",
                    "value": 3
                }, {
                    "Month": "4",
                    "year": "2010",
                    "value": 4

                }, {
                    "Month": "5",
                    "year": "2010",
                    "value": 5
                },
                                {
                    "Month": "6",
                    "year": "2010",
                    "value": 6
                }, {
                    "Month": "7",
                    "year": "2010",
                    "value": 7
                }, {
                    "Month": "8",
                    "year": "2010",
                    "value": 8

                },
                                {
                    "Month": "9",
                    "year": "2010",
                    "value": 9
                }, {
                    "Month": "10",
                    "year": "2010",
                    "value": 10
                }, {
                    "Month": "11",
                    "year": "2010",
                    "value": 11

                },
                                {
                    "Month": "12",
                    "year": "2010",
                    "value": 17117.00
                },
                                 {
                    "Month": "1",
                    "year": "2011",
                    "value": 12
                }, {
                    "Month": "2",
                    "year": "2011",
                    "value": 13
                }, {
                    "Month": "3",
                    "year": "2011",
                    "value": 4
                }, {
                    "Month": "4",
                    "year": "2011",
                    "value": 6

                }, {
                    "Month": "5",
                    "year": "2011",
                    "value": 24
                },
                                {
                    "Month": "6",
                    "year": "2011",
                    "value": 3
                }, {
                    "Month": "7",
                    "year": "2011",
                    "value": 35
                }, {
                    "Month": "8",
                    "year": "2011",
                    "value": 34

                },
                                {
                    "Month": "9",
                    "year": "2011",
                    "value": 22
                }, {
                    "Month": "10",
                    "year": "2011",
                    "value": 21
                }, {
                    "Month": "11",
                    "year": "2011",
                    "value": 215

                },
                                {
                    "Month": "12",
                    "year": "2011",
                    "value": 12
                }];

            function createChart() {
                $("#chart").kendoChart({
                    theme: $(document).data("kendoSkin") || "default",
                    dataSource: {
                        data: internetUsers,
                        group: {
                         field: "year"
                        },
                      sort: {
                            field: "year",
                            dir: "asc"
                        }
                    },
                    title: {
                        text: "Sales"
                    },
                    legend: {
                        position: "bottom"
                    },
                    seriesDefaults: {
                        type: "column"

                    },
                    series: [{

                        field: "value"


                    }],
                  valueAxis: {
                        labels: {
                            format: "{0}$"
                        },

                        line: {
                            visible: false
                        },
                        axisCrossingValue: 0
                    },
                    categoryAxis: {
                        field: "Month"

                    },

                    tooltip: {
                        visible: true,
                        format: "{0}%",
                        template: "#= series.name #: #= value #"
                    }
                });
            }

            $(document).ready(function() {
                setTimeout(function() {
                    // Initialize the chart with a delay to make sure
                    // the initial animation is visible
                    createChart();

                    $("#example").bind("kendo:skinChange", function(e) {
                        createChart();
                    });
                }, 400);
            });
        </script>
    </div>

http://jsbin.com/oxakup/17/edit

Answer 1

您需要按月而不是年份对dataSource进行排序：

sort: { field: "Month", dir: "asc" }

现在你的月份正在根据你的值正确排序，虽然月份数据类型是字符串而不是数字，因此现在将按1,10,11,12,2,3等排序。

您可以通过在JSON数据源中修复它来解决此问题，但是如果您无法更改它，则可以在处理之前使用以下格式化dataSource中的数据：

schema: {
  data: function(response) {
    for (var i = 0; i < response.length; i++) {
      response[i].Month = new Number(response[i].Month);
    }
    return response;
  }
}

为什么x轴值上的thekendo柱形图不按顺序显示

1 个答案: