javascript - 动态变化的浮标

通过将其添加到选项中，可以在创建时在float上绘制线段。

 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。

最佳答案

要使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。