在实时图表的最后一个数据点上添加注释

Question

我有一个像这样的实时图表（红点除外）

我想要的是在最后一个数据点周围挂着红点，因为图表会定期更新。我们的想法是获取数据点的坐标，并以某种方式将这些坐标分配给红点。

所以我不知道如何在flot chart中做到这一点。请帮助！

Answer 1

您可以使用flot的pointOffset()方法获取数据点相对于包含div的图表的位置（以像素为单位）。从那里，您可以将注释附加到包含您的flot图表的div。来自文档：

  

pointOffset（{x：xpos，y：ypos}）

     

返回数据中（x，y）处数据点的计算偏移量   占位符div中的空格。如果您正在使用多个   轴，您可以指定x和y轴参考。

下面的代码和this JSFiddle演示了如何遍历flot图表的数据系列以获取最后一个数据点的位置：

// loop through each data series in the flot chart
$.each(plot.getData(), function(i, item, array) {

    // get the last data point in the series data, e.g. [0, 5]
    var lastDatapoint = item.data[item.data.length - 1];

    // get the position of the datapoint
    var position = plot.pointOffset({
      x: lastDatapoint[0],
      y: lastDatapoint[1]
    });
});