设置Kendo UI图表的数据源以及显示摘要?

时间:2014-05-26 15:25:43

标签: javascript jquery kendo-ui

我正在使用ajax api调用从SQL数据库获取数据,如下所示:

    function getJsonData(type, period1, period2, id) {
    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                type: "GET",
                url: createURL(type, period1, period2, id),
                dataType: "json",
                contentType: "application/json; chartset=utf-8"
            }
        },

    });    
    return dataSource;
}

使用上面的数据源,我创建了一个如下的Kendo图表:

 function stepsChart(container, title, period1, period2) {

        var dSource = getJsonData("Summary", period1, period2, "<% = id %>");

        $(container).kendoChart({

            dataSource: dSource,

            seriesColors: ["orangered"],

            chartArea: {
                background: ""
            },

            title: {
                text:title

            },

            legend: {
                visible: false
            },

            chartArea: {
                background: ""
            },

            seriesDefaults: {
                type: "column",
                gap:5
            },
            series: [{
                name: "steps",
                field: "steps",
                categoryField: "createddate",
                aggregate: "sum"
            }],

            categoryAxis: {
                type: "date",
                baseUnit: getBaseUnit(period1, period2),
                labels: {
                    rotation: -45,
                    dateFormats: {
                        days : getDateFormat(period1, period2),
                        weeks: getDateFormat(period1, period2),
                        years: getDateFormat(period1, period2)
                    },
                    step: getSteps(period1, period2)
                },
                majorGridLines: {
                    visible: false
                }
            },

            valueAxis: {
                majorGridLines: {
                    visible: true
                },                    
                labels: {
                    template: "#= kendo.format('{0}',value/1000)#K"
                },
                title: {
                    text: "Steps"
                }
            }

        });
    }

我还想使用上面数据源中的数据来显示图表下方div中的信息摘要。但是,如果我添加像

这样的东西
var k = dSource.data;

k中没有任何数据。有没有办法在创建图表的函数中获取json数据?

1 个答案:

答案 0 :(得分:1)

DataSource.data是一个功能。我认为你的代码应该是:

var k = dSource.data();

如果尚未读取数据,那么这也将返回一个空数组,因此您可能需要这样做:

dSource.one("change", function () {
    var k = dSource.data();
});
dSource.fetch();

因为.fetch()是异步的。