Kendo UI 图表 - 如何在加载数据时显示动画？

Posted 2023-05-07

【中文标题】Kendo UI 图表 - 如何在加载数据时显示动画？

【英文标题】：KendoUI chart - how do I show animation while loading data?

【发布时间】：2013-07-21 12:40:16

【问题描述】：

我有一个用 javascript 生成的 KendoUI 图表。有没有办法用命令清除 plotArea ？用于在等待 DataSource 读取远程数据时显示“正在加载...”图像。

谢谢

【问题讨论】：

Telerik 文档网站上有一个完整的示例：docs.telerik.com/kendo-ui/dataviz/chart/how-to/…

我想他们现在已经把它作为他们图书馆的一部分。 2 年前不是这样...感谢您的链接！

【参考方案1】：

显示和隐藏加载动画是：

// Display progress
kendo.ui.progress($("#loading"), true);

// Hide progress
kendo.ui.progress($("#loading"), false);

那么您应该在DataSource 中使用requestStart 和requestEnd 事件来了解何时显示或隐藏进度动画。

图表的数据源是：

dataSource    : 
    transport   : 
        read: 
            url:...
        
    ,
    sort        : 
        field: "year",
        dir  : "asc"
    ,
    requestStart: function () 
        kendo.ui.progress($("#loading"), true);
    ,
    requestEnd  : function () 
        kendo.ui.progress($("#loading"), false);

    
,

此处示例：http://jsfiddle.net/OnaBai/kcptr/

【讨论】：

这是一个很好的解决方案！唯一的问题是加载图像挂在页面中间 - 我在页面上有几个图表，因此加载图像必须包含在图表区域本身中：jsfiddle.net/ningencat/kcptr/2 你将如何解决这个问题？谢谢

问题是加载的容器需要有一个定位设置为相对。试试这个：jsfiddle.net/OnaBai/kcptr/3

3 年后，这仍然可以完美运行。谢谢！