1

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

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

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

4

2 回答 2

2

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

其次是刷新图表，Kendo's 不提供在没有完全重绘的情况下更新图表的“好”方法。所以我们必须移动 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 fiddle 结合起来是行不通的——jQuery-UI 事件不会绑定到图形（回到我帖子开头的问题 1）。所以我必须这样做才能得到一个我可以移动的图表：

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

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

但这应该让你开始......

于 2013-09-20T10:47:04.713 回答
0

我已经为 Kendo 的工作示例更新了一个小提琴..

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

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

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

样本fiddle

Sample2fiddle这适用于可拖动的 jQuery UI，但现在由于 SVG 而出现在图形中。

这应该给你一个好的开始。

于 2013-09-20T10:13:05.377 回答