动态更改 flot 中的标记

Question

我可以在创建 is 时在 flot 上绘制线段，方法是将其添加到选项中。

 markings: [
  { xaxis: { from: 150, to: 200 }, color: "#ff8888" },
  { xaxis: { from: 500, to: 750 }, color: "#ff8888" }
 ]

现在我想删除这些标记并通过调用函数添加新标记。我尝试了以下方法，但还没有奏效。我想我没有以正确的方式访问网格。它在选项中，但不确定如何访问它。我也不知道如何去除旧标记。

   CustomPlot.prototype.setRibbons = function setRibbons(x1, x2) {
    alert("ok"); \this works

    this.plot.getOptions().grid.markings.axis.from = x1;
    this.plot.getOptions().grid.markings.axis.to = x2;
    this.plot.getOptions().grid.markings.color = "#ff8888";
    this.plot.setupGrid();
    this.plot.draw();

这里是plnkr example。

Answer 1

要使 setRibbons 函数在您的 plnkr 中按预期工作，需要注意一些事项。

首先，您想通过将选项设置为空数组来删除当前标记：

this.plot.getOptions().grid.markings = [];

然后您需要在重绘绘图之前为您通过的选项重新添加标记：

this.plot.getOptions().grid.markings.push({ xaxis: { from: x1, to: x2 }, color: "#ff8888" });

将它们放在一起，setRibbons 函数如下所示：

CustomPlot.prototype.setRibbons = function setRibbons(x1, x2) {
    //remove old ribbons should there be any
    this.plot.getOptions().grid.markings = [];

    //draw new ones
    this.plot.getOptions().grid.markings.push({ xaxis: { from: x1, to: x2 }, color: "#ff8888" });

    this.plot.setupGrid();
    this.plot.draw();
}

我也更新了你的plnkr example。

动态更改 flot 中的标记

Dynamically changing markings in flot

javascript

flot