时间戳

首页 > 解决方案 > jQuery 的 KendoUI - 图表数据绑定事件不起作用

kendo-ui - jQuery 的 KendoUI - 图表数据绑定事件不起作用

问题描述

这是我的数据的简化示例：

[{"Name": "Bob", "Count":3}, {"Name": "Steve", "Count":5}]

我想要的是一个图表标题：Total FOO: 8。所以标题必须基于数据。数据是 AJAX，这是一个 ASP.MVC 应用程序。

在我的 CSHTML 中，我有：

.DataSource(ds => ds.Read(read => read.Action("MeMethodName", "MyControllerName")))
.Events(events => events.DataBound("setChartTitle('chartName', 'Total FOO')"))

这是我必须做的疯狂黑客：

   function setChartTitle(name, title) {
      let chart = $("#" + name).data("kendoChart");
      if (chart) {
         let ds = chart.dataSource;
         let total = 0;
         for (let i = 0; i < ds.data().length; i++) {
            total += ds.data()[i].Count;
         }

         chart.options.title.text = title + ": " + total;
         chart.refresh();
      } else if (arguments.length < 3) {
         // Data source was not found and this was initiated through Kendo. Wait and try again but only once
         setTimeout(function () {
            sumEntityCount(name, title, "stop");
         }, 500);
      }
   }

这真的很糟糕。

  1. 访问kendoChart未定义的返回值，但图表本身调用了这个。这就是为什么我需要检查if (chart)上面的原因。
  2. 这导致我添加了一个 hacky ELSE 块，我可以在其中以 500 毫秒的延迟再次调用它。仅此一项就是一个错误，因为 500 毫秒是一个随机数，可能还不够。我不能这样发货。
  3. 为了防止递归，我用不同的参数调用相同的函数。
  4. 如果找到值，那么我不能只设置图表选项。我需要调用refreshwhich 重绘所有内容。

问题：

  1. 为什么最初未定义 kendoChart 数据？为什么 TelerikdataBound会在什么都没有的时候打电话来？！
  2. 不是有dataBinding活动吗？我不想在事后这样做，也不想刷新整个事情。

标签： kendo-uikendo-asp.net-mvckendo-chart

解决方案

当您声明一个基本函数而不调用它时，图表本身会被传入：

.events(events => events.Render("someFunction"))

然后声明你的函数：

function someFunction(sender) {
   // sender.chart is what I want
}

但是你不能在这里传递任何参数。这意味着我不能使用它。

hack 是执行以下操作：

.Events(events => events.Render("function(sender) { someFunction(sender, 'param1', 'param2', 'param3'); }"))

这给了它一个实际的函数，而不是调用一个函数。Kendo 按预期传递发送者，您可以将其与新参数一起传递给您的 JavaScript。

我也改用 Render 而不是 DataBound。

推荐阅读