javascript - float : Get the x axis offset while drawing markings

Question

我正在尝试向我的图表添加删除按钮，以删除绘制的标记。为了放置这个按钮，我需要设置图像的偏移量(顶部和左侧)。

场景 1:绘制图表后，单击图表中的数据点，我垂直绘制标记。在这种情况下，我想获得标记的正确左偏移量，以便我可以在标记顶部放置一个按钮。类似于下面的屏幕截图。

场景 2:我已将这些单击的数据点存储在我的 bean 中，当图形重新加载或刷新时，我使用这些存储的数据点再次创建标记。此时我还想知道左偏移集，以便我可以将按钮再次放置在此标记的顶部。

这是我尝试使用的 js 片段。

$("#placeholder").bind("plotclick", function (event, pos, item) {

        if (item) {
            $("#clickdata").text(" - click point " + item.dataIndex + " in " + item.series.label);
            var p = item.datapoint[0];
            markings1.push({ xaxis: { from: item.datapoint[0], to: item.datapoint[0] }, color: "#EF4036" });

            $("#tooltip").remove();
            var div = $('<div id="d1">');
            var imid = "dp"+item.datapoint[0];

            var img = $('<img class="btn">'); //Equivalent: $(document.createElement('img'))


            img.attr('id', imid);
            img.attr('src', "http://megaicons.net/static/img/icons_sizes/8/178/256/editing-delete-icon.png");

            $("#"+imid).data('dp',item.datapoint[0]);
            img.appendTo("#d1");
            img.width(20);
            img.data('dp',item.datapoint[0]);
            img.height(20);
            img.offset({top: plot.offset().top-25, left: pos.pageX-10});
            div.appendTo('#placeholder');

            plot.draw();    

        }
    });

感谢任何帮助。

Answer 1

您可以使用它来获取图表中 x 值的 x 坐标(相对于页面):

var xPos = plot.offset().left + plot.getAxes().xaxis.p2c(xValue);

参见 documentation了解更多信息。