Kendo UI线图中的点拖动
我有一个简单的Kendo用户界面线图，例如：
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: 'line',
data: [200, 450, 300, 125]
}]
});
</script>如何启用/实现点拖动？(也就是说，我希望用户用鼠标拖动垂直移动点)
回答 2
Stack Overflow用户
发布于 2013-09-20 10:47:04
您有几个问题要解决-一个是默认的行为点击/拖动/悬停在Kendo图表上，我看到。这应该很容易禁用，但这取决于您是否希望结合其中的一些。
第二，刷新图形，Kendo's没有提供一种“很好”的方法来更新图形，而不需要完全重绘。因此，我们必须移动SVG中的线条，作为拖动的一部分。不幸的是，它们是路径的一部分，所以这就更复杂了。
您肯定可以将事件处理程序附加到各个圈子中，您可以使用jQuery (拖曳)这样的另一个框架来实现这一点。但这就引出了第三个问题，您必须了解不同SVG元素的ID与实际使用的数据是如何关联的。在内部，它为图形上的圆圈和路径创建了数字it-您需要了解它们与数据点的关系。
如果您做过这样的工作，并且可以访问jQuery，您可以尝试这样的方法(注意，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，您还需要更新路径。当你抛出圆圈时，你可以欺骗和做剑道.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所以这是非常接近的--如果你能计算出如何将每个圆圈与路径中的一个点联系起来(而且可能有一个it的模式)，那么你几乎肯定可以这样做。
如果您想避免使用jQuery，可以手动实现所有的拖放操作--这并不难，因为上面已经完成了位置更新。
编辑
好的，我更多地考虑了这一点--我可以看到这个图本身包含在两个内部元素中，所以我们可以使用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事件并不绑定到图形(在我的文章开始时返回到问题1)。因此，我不得不这样做才能得到一个我可以移动的图表：
var chart = $("#chart").data("kendoChart");
var svg = chart.svg();
chart.destroy();
$("#chart").html(svg);从这里我得到了一个工作的小提琴，但是它将取决于您想要对数据做什么。您可能需要处理如何解除绑定Kendo事件并绑定您自己的事件，或者使用上面的逻辑重新执行不同的拖放实现。
但这应该会让你开始..。
https://stackoverflow.com/questions/18846292
复制相似问题
腾讯云开发者
