Kendo ui 如何在剑道UI中获取拖动事件的系列数据

Kendo ui 如何在剑道UI中获取拖动事件的系列数据,kendo-ui,kendo-datasource,kendo-chart,kendo-draggable,Kendo Ui,Kendo Datasource,Kendo Chart,Kendo Draggable,在剑道UI中,无论何时使用拖动事件,我们都可以获得屏幕x和y位置,但如何在剑道UI图表(折线图)中获得系列/数据源信息 在下面的代码中,我使用drag事件突出显示char(时间序列)行中的一些信息,然后打印数据 function createChart(data) { $("#TimeSeriesPlot").kendoChart({ title: { text: series_name.toU

在剑道UI中,无论何时使用拖动事件,我们都可以获得屏幕x和y位置,但如何在剑道UI图表(折线图)中获得系列/数据源信息

在下面的代码中,我使用drag事件突出显示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)

}

为此,您需要从鼠标位置找到最平行的图表点。 然后,假设
selectednode
是与鼠标当前位置最平行的点。 现在,您可以在Dataitem变量
Dataitem=selectednode中找到该点的数据

我为自己解决了这个问题,就像

$("#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()


如果它不适合您,请告诉我。

请发布图表的代码,并解释您试图通过拖动实现的目标。请在问题中找到上面的代码。那么,您是否尝试拖动一个矩形,然后获取该矩形内的所有点?是的,您是对的,目前,我能够获得屏幕x和屏幕y点,但我希望有数据绑定,因此我可以获得类别值,但我不确定在拖动事件中如何实现这一点。如果你能帮我,那就太好了。谢谢
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) {            
        Dataitem = selectednode._kendoNode.srcElement.chartElement.pointData.dataItem;
        return false;
        }
    }
}}