剑道图表分组/排序答案

【问题标题】：kendo chart grouping/sorting剑道图表分组/排序
【发布时间】：2014-05-30 18:45:46
【问题描述】：

这是我遇到的问题的一个示例：http://jsfiddle.net/zdanev/dRH5y/7

我正在尝试在分组后对剑道图表的条形进行排序。我想按第三个字段（不是类别或组）对它们进行排序。在上面的示例中，当我单击按分数排序时，我希望第二组条形按降序排序（按 CustomOrder 字段排序）。

我错过了什么？谢谢

var group = "Student";
var category = "Test";
var sort = "Student";

function updateChart() {
    var chart = $("#chart").data("kendoChart");

    chart.dataSource.group([{ field: group }]);
    chart.dataSource.sort([{ field: sort }]);
    chart.options.categoryAxis.field = category;

    chart.options.title = "group by " + group + ", sort by " + sort;

    chart.refresh();
}

【问题讨论】：

在您的图表定义中，设置“组”：[]、“排序”：[]，并在您的每个方法中根据需要设置变量。如果您想区分“asc”与“desc”，您可能需要添加一个方向变量。正如@carter 指出的那样， ,group 和 .sort 将调用数据源的刷新。由于您在定义中对分组和排序进行了“硬编码”，因此它优先于刷新。
jsfiddle.net/dRH5y/36

标签： kendo-ui kendo-dataviz

【解决方案1】：

http://jsfiddle.net/colbycallahan/HRpL8/

它可能并不完美，但希望你能明白。如果您绑定到数据源，那么您对数据源进行排序和分组，它将触发图表的刷新。

var myDataSource = new kendo.data.DataSource({
    data: jsonData,
    group: [{ "field": "Student"}],
    sort: [
        { "field": "Test", "dir": "asc" },
        { "field": "CustomOrder", "dir": "asc" }
    ],
    schema: {
        model: {
            fields: {
                Student: {
                    "type": "string"
                },
                Test: {
                    "type": "string"
                },
                Value: {
                    "type": "number"
                },
                CustomOrder: {
                    "type": "number"
                }
            }
        }
    }
});

function groupByTest_click() {    
    group = "Test";
    category = "Student";
    updateChart();
    $('#chart').data('kendoChart').dataSource.group([{ field: group }]);
    $('#chart').data('kendoChart').dataSource.sort([{ field: sort, dir: "desc" }]);    
}

【讨论】：