flot : 获取绘制标记时的x轴偏移量

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。

flot : 获取绘制标记时的x轴偏移量

Flot : Get the x axis offset while drawing markings

javascript

jquery

flot