剑道 UI 折线图中的点拖动

Point dragging in Kendo UI line chart

本文关键字：拖动 UI 折线图 剑道      更新时间：2023-09-26

我有一个简单的剑道UI折线图，例如：

    <div id="chart"></div>      
    <script>
        $("#chart").kendoChart({
            series: [{
                type: 'line',
                data: [200, 450, 300, 125]
            }]
        });
    </script>

如何启用/实现点拖动？（即我希望用户通过鼠标拖动垂直移动点）

您有几个问题需要克服 - 一个是我看到的剑道图表上单击/拖动/悬停的默认行为。这应该很容易禁用，但这取决于您是否要组合其中的一些。

其次是刷新图形，Kendo没有提供一种"好"的方法来更新图形而无需完全重绘。因此，我们必须移动 SVG 中的线条作为拖动的一部分。不幸的是，它们是路径的一部分，所以这更复杂。

你绝对可以将事件处理程序附加到各个圆圈，你可以使用另一个框架，如jQuery-UI（Draggable）来实现它。但这给我们带来了第三个问题，你必须了解不同SVG元素的ID与你正在使用的实际数据的关系。在内部，它为图表上的圆圈和路径创建了数字 ID - 您需要了解它们与数据点的关系。

如果你在这方面工作并且有jQuery-UI可访问，你可以尝试这样的东西（注意，SVG可拖动的帮助改编自这个答案和MarmiK的小提琴）。

$('circle')
    .draggable({ 
        axis: "y",
        containment: $('svg') 
     })
    .bind('mousedown', function(event, ui){
        // bring target to front
        $(event.target.parentElement).append( event.target );
    })
    .bind('drag', function(event, ui){
    // update coordinates manually, since top/left style props don't work on SVG          
    event.target.setAttribute('cy', ui.position.top + 2);
    // Update the path here, then update the data: 
    // $chart.options.series[?].data[?] = new position.
});

小提琴

包含只需要绘图区域而不是整个 SVG，并且您还需要更新 PATH。当你丢掉圆圈时，你可以作弊并做剑道.redraw()的方法——这不会像它可能的那样光滑，但它会起作用。

然后要动态更新路径，可以 

var path = $('#k10014').attr('d'); // Get Path
path = path.substr(1);             // Remove M 
p_array = path.split(" ");         // Split into array
p_array[7] = ui.position.top;      // Change one value (but which one?)
path = "M"+ p_array.join(" ")      // Combine back with M
$('#k10014').attr('d', path);      // Update SVG

小提琴

所以这非常接近 - 如果你能弄清楚如何将每个圆与路径中的一个点相关联（并且ID可能有一个模式），那么你几乎可以肯定这样做。

如果你想避免使用jQuery-UI，你可以手动实现所有的拖动内容 - 这并不难，因为位置更新已经在上面完成了。

编辑

好的，我已经考虑了更多 - 我可以看到图本身包含在两个内部元素中，所以我们可以使用jQuery来获得它。然后很容易找到第一条路径（这是第一行）并计算出我们正在拖动哪个圆圈，我做了一个函数： 

// This only works for one path ... but if you know the number of points
// then you can expand this easily ... 
function movePathForPointId(element, pos) {
   // Update pos to account for the circle radius 
   pos = pos + 2;
   // The graph is in two nested <g> elements, we can use this ... 
   // First find the position of the circle,     
   var pointIndex = $('svg g g circle').index(element); 
   // Get the first path in the graph 
   var pathElement = $('svg g g path').first();
   var path = pathElement.attr('d');     // Get Path String
   path = path.substr(1);                // Remove M 
   p_array = path.split(" ");            // Split into array
   p_array[(pointIndex * 2) + 1] = pos;  // Change one value (but which one?)
   path = "M"+ p_array.join(" ")         // Combine back with M
   pathElement.attr('d', path);          // Write new path back to SVG
   element.setAttribute('cy', pos);      // Update circle position
   return pointIndex;                    // Might be useful to update the data table
}

将其与MarmiK的Kendo小提琴结合使用是行不通的 - jQuery-UI事件不会绑定到图形（回到我文章开头的问题1）。所以我必须这样做才能得到一个我可以移动的图表： 

var chart = $("#chart").data("kendoChart");
var svg = chart.svg();
chart.destroy();
$("#chart").html(svg);

从那里我有一个工作的小提琴，但这取决于你想用数据做什么。您可能需要研究如何取消绑定 Kendo 事件并绑定您自己的事件，或使用上面的逻辑重做不同的拖动实现。

但这应该让你开始...

我已经更新了剑道工作示例的小提琴。

我研究了图表的部分，它使用 SVG 绘制图表，

我更新了绘制图表的草稿模型，还添加了应该拖动的小代码，

图表下方的圆圈。 但它不是使用 kendoDraggable 拖动

样品fiddle

示例 2 fiddle这适用于可拖动的 jQuery UI，但由于 SVG 的原因，现在在图形中。

这应该给你一个良好的开端。

相关文章：