Kendo UI：如何获取事件内单击的图表元素项的索引答案

【问题标题】：KendoUI: How do I get the index of the clicked chart element's item inside an eventKendo UI：如何获取事件内单击的图表元素项的索引
【发布时间】：2013-12-15 12:23:55
【问题描述】：

我想访问以下事件的索引：seriesClick 和 seriesHover。我只在http://docs.kendoui.com/api/dataviz/chart#events-seriesClick 的文档中看到如何访问特定栏的值和类别，但看不到该项目所基于的原始对象的数据。

【问题讨论】：

标签： javascript event-handling kendo-ui kendo-asp.net-mvc kendo-dataviz

【解决方案1】：

例如，您可以访问 e.dataItem 中的相应数据项，因此您可以这样做：

var data = e.sender.dataSource.data();
for (var i=0; i < data.length ; i++) {
    if (e.dataItem.uid === data[i].uid) {
        console.log("index " + i);
    }
}

如果这就是“索引”的意思。

您还可以访问e.series 中的系列数据（但所有这些都在文档中）。

【讨论】：

【解决方案2】：

Kendo Graph 的默认数据系列是数值数组。这些值没有 uid，因为它们不是对象。

不要在您的系列对象中创建一个数字数组，而是创建一个对象数组。在系列元素中，创建一个名为“字段”的属性，并使用对象中包含要绘制图表的数值的字段名称填充该字段。这个对象将有一个 uid。我这样做是为了将 url 与数据点相关联，并在单击时移动到该页面。

我的对象是用 C# 制作并使用 JSON 传递的，但您可以随意制作这些对象。

public class DowntimeAnalysisSeries : DatabagUtility
{
    public string name { get; set; }
    public string field { get; set; }

    public DowntimeAnalysisDatapoint[] data { get; set; }
    //public  decimal[] data { get; set; }
    public string color { get; set; }
}

public class DowntimeAnalysisDatapoint
{
    public decimal dataValue { get; set; }
    public string url { get; set; }
}

现在您可以使用上述 Lars Höppner 描述的逻辑了。将数据放入对象后，我不再需要知道索引，因为 Kendo 将它提供给我。

我通过将以下行放入图表设置来附加到系列点击事件：

seriesClick: function (e){rla_summaryBarClicked(e);}

我调用的函数如下：

    function rla_detailBarClicked(e) {
        var item = e.dataItem;
        var url=item.url;
        // do stuff with url here...
        }
    }

我可以使用我填充到 dataItem 中的所有信息。

【讨论】：

这里要注意的一点是，要使此解决方案起作用，您还需要设置字段属性：.Field("dataValue")

【解决方案3】：

我在下一个事件结构中没有找到成员 e.series 或 e.uid：

e: Object
_defaultPrevented: false
category: Tue Jul 05 2011 12:00:00 GMT+0400
element: S.fn.init[1]
isDefaultPrevented: function (){return this._defaultPrevented===!0}
preventDefault: function (){this._defaultPrevented=!0}
sender: vn.extend.init
value: 9.833887
__proto__: Object

但同时它有数组项：

100: i.extend.o
DateTimeLocal: Sat Jul 02 2011 00:00:00 GMT+0400
DateTimeUTC: "/Date(1309554000000)/"
Value: 0.6488973049506388
_date_DateTimeLocal: Sat Jul 02 2011 00:00:00 GMT+0400
_events: Object
dirty: false
parent: function (){return r}
uid: "e5376556-c50b-4653-8889-5eb4ea7c2c28"

日期时间比较也没有给出应用此块的结果

var data = e.sender.dataSource.data();
for (var i = 0; i < data.length ; i++) {
    var d = data[i].DateTimeLocal;
    if (e.category == data[i].DateTimeLocal) {
        console.log("index " + i);
    }
}

【讨论】：

您不应为此使用“答案” - 编辑您的问题和/或对答案发表评论；在你的情况下，我建议尝试创建一个演示来说明你的问题 - 你可以从这个开始：jsfiddle.net/lhoeppner/Z6DsC/2
链接上的图表不可点击。控制台日志为空，不显示数组索引。
实际上我的模型中有三个数组：1) 值、2) 日期和 3) 文本描述。单击图表我不需要值或类别，而是第三个，工具提示和控制台日志中的文本根据数组的单击或悬停索引。
在我提供的那个小提琴中，您可以单击条形图，它会在控制台中为您提供索引，以及数据项和系列（我刚刚验证它有效） - 对不起，如果这不是您想要的，我不明白您要做什么。
我只是点击链接，点击任何栏后，在 IE 和 Chrome 中看到仍然是空的控制台右下角窗口。

【解决方案4】：

对我来说，这是有效的：

 seriesClick: function (e) {
      var data = e.series.data;
      for (var i = 0; i < data.length ; i++) {
      if (e.dataItem === data[i]) {
           console.log("index " + i);
      }
 }

【讨论】：