javascript - 如何删除 Highcharts 上的垂直绘图线

Question

假设我添加一些带有不同名称的垂直线标签。现在我想通过单击该行来删除该行。我该怎么办...请有人帮忙。提前致谢。

Answer 1

您可以执行以下操作来单击绘图线并将其立即删除:

在 xAxis 配置中，添加带有 click 事件的plotLine:

xAxis: {
    plotLines: [{ // mark the weekend
        id: 'plotLine1',
        color: 'red',
        width: 2,
        value: Date.UTC(2010, 0, 4),
        events: {
            click: function(e) {
                this.axis.removePlotLine(this.id)
            }
        }
    }],
    tickInterval: 24 * 3600 * 1000,
    // one day
    type: 'datetime'
},

这是一个 fiddle 来展示它的工作原理:Click Here

要消除网格线，您只需在 yAxis 配置中将它们设置为透明即可:

yAxis: {
    ...
    gridLineColor: 'transparent',
}

编辑新问题:要删除此示例中的线条，您只需将事件配置添加到新的plotLines - 如下所示:

// Inside chart event click function:
    chart.addPlotLine({
        value: event.xAxis[0].value,
        color: '#'+(Math.random()*0xEEEEEE<<0).toString(16),
        width: 2,

        // added label to id so the id is unique:
        id: 'vertLine_'+label,
        zIndex: 9999,

        // added plotLine event click - same as before.
        events: {
            click: function(e) {
                this.axis.removePlotLine(this.id);
            }
        },
        label : {
            text : label
        }
    });

此外，如果提示没有输入文本，您似乎正在尝试使图表不添加标签。为此，我建议在 if 语句中添加条件 && label != '' ，因此总的来说，它看起来像 if(label!=null && label != '') 。我从 This site 得到了这个提示.

这是更新后的 fiddle :Click Here .

注意:为了每次都能成功点击该线，请瞄准左侧。我不知道为什么，但这对我来说效果更好。希望这有帮助!