【问题标题】:KendoUI chart - how do I show animation while loading data?Kendo UI 图表 - 如何在加载数据时显示动画?
【发布时间】:2013-07-21 12:40:16
【问题描述】:

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

谢谢

【问题讨论】:

标签: kendo-ui kendo-datasource kendo-chart


【解决方案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 年后,这仍然可以完美运行。谢谢!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-04-12
  • 2013-07-19
  • 1970-01-01
  • 2011-01-08
  • 1970-01-01
相关资源
最近更新 更多