jquery - 使 dataLabel 可拖动

Question

在 highcharts 中，我尝试向点的数据标签添加拖动效果。我找到了几种针对给定标签的方法。在这个 fiddle 中你可以看到我的一些尝试。 (我在这里将不同的尝试组合在一起，以展示我的尝试)

http://jsfiddle.net/EjwaX/3/

现在，使用 Chart.series[0].data[0].dataLabel 和使用点单击事件使我能够更改 dataLabel 的属性。但是我无法将 jquery ui .draggable() 附加到标签。是否可以以某种方式使图表内的元素可拖动？

如果需要更多信息，请告诉我

Answer 1

您实际上可以附加 draggable将小部件添加到数据标签就好了。但是，由于数据标签是 SVG元素，它们完全忽略对其 position 所做的更改, left和top CSS 属性。

相反，<g>包裹标签的元素暴露 transform属性:

<g zIndex="1" transform="translate(9, 152)">
    <!-- data label content -->
</g>

我们仍然可以使用draggable小部件(这非常方便，因为它抽象了较低级别的拖动事件)并更新 transform drag 中数据标签包装器的属性事件处理程序。由于拖动坐标是相对的，我们必须解析原始的 transform属性并使用结果坐标作为原点。

现在，所有标签包装本身都是用 highcharts-data-labels 装饰的组的子代。类(class)。这为我们提供了一个很好的起点，因此我们可以编写如下内容:

$(".highcharts-data-labels").children().filter(function() {
    var $this = $(this);
    // Parse original translation.
    var coords = $this.attr("transform")
                      .match(/translate\((-?\d+),\s*(-?\d+)\)/);
    if (coords) {
        // Associate origin with element.
        return $this.data("origin", {
            x: +coords[1],
            y: +coords[2]
        });
    } else {
        // Parsing failed, reject element.
        return false;
    }
}).draggable({
    drag: function(event, ui) {
        var $this = $(this);
        // Fetch back origin.
        var origin = $this.data("origin");
        // Update current transform.
        $this.attr("transform", "translate("
            + (origin.x + ui.position.left) + ", "
            + (origin.y + ui.position.top) + ")");
    }
});

您会发现更新的 fiddle here .

关于上面代码的一些注释:

• filter()使用而不是 each()因为它允许我们过滤掉 transform 的元素属性无法被解析(你永远不知道)，而不是彻底失败或向 drag 中的计算提供垃圾。处理程序，

• attr()使用而不是 prop()强调我们正在修改 SVG 片段中的属性这一事实。 prop()可能会以完全相同的方式工作，所以这只是风格和个人喜好的问题。

最后，需要注意的是:我目前只能在 Firefox 上进行测试，但似乎很难触发 mousedown某些标签上的事件，特别是在“拥挤”区域，部分曲线和数据提示争夺空间。调整zIndex数据标签包装器的属性并没有取得多大作用。多次点击有时会有所帮助。如果这在所有浏览器上都是一致的，则可能需要设计其他解决方案(可能是透明覆盖，或者只是将 mousedown 事件从数据点本身中继到数据标签)。