如何基于Account字段配置Kendo Chart实现多账户数据柱状图展示

原创建图表的代码如下：

<div id="chart"></div>

function createChart() {
    $("#chart").kendoChart({
        dataSource: {
            transport: {
                read: {
                    url: '@Url.RouteUrl(new { Area = "SuperAdmin", Controller = "DeviceDataUsage", Action = "DeviceDataUsageChart" })',
                    type: "POST",
                    dataType: "json"
                }
            },
            sort: {
                field: "Date",
                dir: "asc"
            }
        },
        categoryAxis: {
            field: "Date"
        }
    });
}

$(document).ready(function () {
    createChart();
});

需求说明 #

Ajax返回的JSON数据包含Date、Account、ByteUsed字段，存在多个不同账户的日期数据（部分日期某账户无数据时，ByteUsed视为0）。需要实现X轴为日期、Y轴为ByteUsed，每个日期下按Account展示对应柱状条的图表。

要实现按Account分组的多系列柱状图，需对Kendo Chart的数据源和系列配置做以下调整：

1. 配置数据源分组 #

在dataSource中添加group配置，按Account字段分组，让数据源自动将相同账户的数据归类：

dataSource: {
    transport: {
        read: {
            url: '@Url.RouteUrl(new { Area = "SuperAdmin", Controller = "DeviceDataUsage", Action = "DeviceDataUsageChart" })',
            type: "POST",
            dataType: "json"
        }
    },
    sort: {
        field: "Date",
        dir: "asc"
    },
    // 新增分组配置
    group: {
        field: "Account"
    }
}

2. 配置图表系列 #

使用模板自动生成每个账户对应的系列，指定Y轴字段为ByteUsed：

series: {
    type: "column",
    field: "ByteUsed",
    // 自动将分组的Account名作为系列名称
    name: "#= group.value #",
    // 可选：设置同日期柱状条的间距，让排列更紧凑
    spacing: 0.1
}

完整配置后的代码 #

<div id="chart"></div>

function createChart() {
    $("#chart").kendoChart({
        dataSource: {
            transport: {
                read: {
                    url: '@Url.RouteUrl(new { Area = "SuperAdmin", Controller = "DeviceDataUsage", Action = "DeviceDataUsageChart" })',
                    type: "POST",
                    dataType: "json"
                }
            },
            sort: {
                field: "Date",
                dir: "asc"
            },
            group: {
                field: "Account"
            }
        },
        categoryAxis: {
            field: "Date",
            // 可选：格式化日期显示格式
            labels: {
                format: "yyyy-MM-dd"
            }
        },
        series: {
            type: "column",
            field: "ByteUsed",
            name: "#= group.value #",
            spacing: 0.1
        },
        // 可选：添加底部图例，展示各账户对应的系列
        legend: {
            position: "bottom"
        },
        valueAxis: {
            label: {
                // 可选：将ByteUsed转换为MB单位显示
                template: "#= kendo.format('{0:N2} MB', value / 1024 / 1024) #"
            },
            title: {
                text: "数据使用量"
            }
        }
    });
}

$(document).ready(function () {
    createChart();
});

关键说明 #

• 数据源的group配置会自动聚合相同Account的数据，Kendo Chart会为每个分组生成独立的柱状条系列。
• series.name使用#= group.value #可直接将账户名作为系列名称，无需手动逐个定义系列。
• 确保后端在某账户无数据的日期，返回该账户对应ByteUsed为0，避免图表系列错位。

内容的提问来源于stack exchange，提问作者Oleg Sh