Flot：绘制标记时获取x轴偏移

Question

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

场景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。