javascript - KendoUI：如何在事件中获取单击的图表元素项目的索引

Question

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

Answer 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（但所有这些都在文档中）。

Answer 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 中的所有信息。

Answer 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"

DateTime 比较也没有给出应用此块的结果

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);
    }
}

Answer 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);
      }
 }