Kendo MVC图表加载远程数据时如何显示加载动画？

以下两种方式均可稳定实现需求，无需引入额外依赖：

方式一：使用Kendo内置progress工具（推荐） #

直接绑定DataSource的请求生命周期事件，调用Kendo自带的加载方法即可：

1. 首先在Razor页的图表配置中，为DataSource添加RequestStart和RequestEnd事件绑定：

@(Html.Kendo().Chart<你的数据模型类>()
    .Name("businessChart")
    .DataSource(ds => ds
        .Ajax()
        .Read(r => r.Action("GetChartData", "你的Controller名称"))
        // 绑定请求前后的事件
        .Events(e => e.RequestStart("showChartLoading").RequestEnd("hideChartLoading"))
    )
    // 此处省略你的其他图表配置（序列、坐标轴、tooltip等）
)

2. 页面添加对应JS逻辑：

// 触发数据请求时显示加载指示器
function showChartLoading(e) {
    // e.sender.element直接获取当前图表的容器，无需硬写ID
    kendo.ui.progress(e.sender.element, true);
}

// 请求完成（成功/失败都会触发）时隐藏加载指示器
function hideChartLoading(e) {
    kendo.ui.progress(e.sender.element, false);
}

该方式的加载指示器样式完全匹配当前你使用的Kendo主题，无需额外编写CSS，多图表场景下可以复用这两个通用方法，不需要单独为每个图表写逻辑。

方式二：自定义加载样式 #

如果需要定制加载的文本、动画效果，可以自行实现DOM控制：

• 提前在图表容器同级写好自定义加载层，默认隐藏
• 请求开始时显示加载层，请求结束后隐藏即可

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