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

Question

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

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

所以我不知道如何在浮动图表中做到这一点。请帮忙！

Answer 1

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

pointOffset({ x: xpos, y: ypos })

Returns the calculated offset of the data point at (x, y) in data space within the placeholder div. If you are working with multiple axes, you can specify the x and y axis references.

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

// 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]
    });
});

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

Flot adding Annotation on the last data point of realtime chart

javascript

jquery

charts

flot