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

Setting datasource of Kendo UI chart as well as showing the summary?

本文关键字：显示 数据源 Kendo UI 设置      更新时间：2023-09-26

我使用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;
}

使用上面的数据源，我正在创建一个剑道图，如下所示：

 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数据？

DataSource.data是一个函数。我认为你的代码应该是：

var k = dSource.data();

如果数据还没有被读取，这也会返回一个空数组，所以你可能需要这样做：

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

因为CCD_ 2是异步的。

相关文章：