Как получить серийные данные о событии перетаскивания в kendo UI

Question

В пользовательском интерфейсе Kendo каждый раз, когда мы используем событие перетаскивания, мы можем получить координаты x и y, но как получить информацию о сериале/источнике данных в графике пользовательского интерфейса Kendo (линейная диаграмма).

В приведенном ниже коде я выделяю некоторую информацию в строке char (временные ряды), используя событие перетаскивания, а затем печатает данные.

function createChart(data) { 

      $("#TimeSeriesPlot").kendoChart({ 

       title: { 
        text: series_name.toUpperCase() 
       }, 
       dataSource :{ 
        data:data.timeseries, 
       }, 
       series: [{ 
        type: "line", 
        field:"v", 
        categoryField:"ts", 
       }], 
       valueAxis: { 
        labels: { 
         format: "{0}" 
        },title:{ 
         text: "value" 
        }, 
        line: { 
         visible: false 
        }, 

       }, 
       categoryAxis: { 
       labels: { 
        type: "date", 

       }, 
       tooltip: { 
        visible: true, 
        // shared:true, 
        template: "${category} - ${value}" 
       }, 

       /***events start from here***/ 

       plotAreaClick: onPlotAreaClick, 
       seriesClick:onSeriesClick , 
       dragStart:onDragStart , 
       drag:onDrag, 
       dragEnd:onDragEnd 

      }); 
     } 
} 

function onSeriesHover(e) { 
     console.log(kendo.format("Series hover :: {0} ({1}): {2}", 
      e.series.name, e.category, e.value)); 
     } 


function onSeriesClick(e){ 
     // console.log(selected_anamolies); 
     // console.log(e.category); 
      selected_anamolies.push("ts",e.category); 
      selected_anamolies.push("v",e.value); 
} 

function onDragStart(e){ 

     // console.log("dragstart"+e.axisRanges.ts); 

     // console.log("dragstart"+e.sender._highlight._points[0].value); 
     //  console.log("dragstart"+e.sender._highlight._points[0].category); 


} 

function onDrag(e){ 

     var Rect = kendo.geometry.Rect; 
     var draw = kendo.drawing; 
     prevloc=e.originalEvent.x.startLocation; 
     currentloc=e.originalEvent.x.location; 

     var rect=new Rect([prevloc,50],[currentloc-prevloc,150]); 
     var path = draw.Path.fromRect(rect,{ stroke: null,fill:{color:"#d3f1fb",opacity:0.2}}); 
     var chart = e.sender; 
// var surface = draw.Surface.create($("#surface")); 
     chart.surface.draw(path); 
        //       
} 


function onDragEnd(e){ 
    console.log(dragEnd) 

} 

Answer 1

Для этого вам нужно будет найти наиболее параллельную точку графика из местоположения мыши. , а затем, предположим, что selectednode - это точка, которая наиболее параллельна текущему местоположению мыши. Теперь вы можете найти данные этой точки в переменной DataItem Dataitem = selectednode._kendoNode.srcElement.chartElement.pointData.dataItem;

Я решил это для меня как ..

$("#yourchartdivid").on('mousemove', function (el, ui) { 
    var child = $(document).find('circle'); 
    var childrens = []; 
child.filter(function (e, data) { 
    if (data.attributes.stroke.value == trendcolor[es].color) { 
    childrens.push(data); 
    } 
}); 
    getfrombottom(el.clientY, el, childrens, el, trendcolor[es].trendname, controlkey);}); 

Теперь определим новую функцию getfrombottom()

function getfrombottom(bottom, event, childrens, i, trendname, controlkey) { 
for (var o = bottom; o > 0; o--) { 
    for (var k = 0; k < childrens.length ; k++) { 
     var originalmousepossition = event.pageY; 
     var originalmouseposition = event.pageX - 9; 
     var circlestopposition = childrens[k].parentNode.getBoundingClientRect().top; 
     var circleleftposition = childrens[k].cx.baseVal.value; 
     if (originalmouseposition - circleleftposition < 3) {    

---

var selectednode = childrens [k];

---

 Dataitem = selectednode._kendoNode.srcElement.chartElement.pointData.dataItem; 
     return false; 
     } 
    } 
}} 

Позвольте мне знать, если он не работает для вас.