Question

我可以在创建时在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中的标记

1 个答案: