剑道图表分组/排序

时间:2014-05-30 18:45:46

标签: kendo-ui kendo-dataviz

这是我遇到的问题的一个例子: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();
}

1 个答案:

答案 0 :(得分:0)

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" }]);    
}