javascript - Highcharts 标签重绘

Question

我正在工作this JSFIDDLE它显示了如何将标签添加到图表中的点。在图表没有响应的情况下，这可以很好地固定标签的位置。更改 fiddle 的宽度，标签位于原始位置。我希望标签保留在最后一列的顶部。

我已经尝试使用 load 和 redraw 事件并且我很接近，但是我需要在创建新标签之前销毁标签。

events: {
    load: function () {
        var point = this.series[0].points[2];
        this.renderer.label(
                '<div class="text-center">GOAL TO REACH</div>', 270, 50, 'callout', point.plotX + this.plotLeft, point.plotY + this.plotTop
        )
        .css({
            color: '#FFFFFF'
        })
        .attr({
            fill: 'rgba(0, 0, 0, 0.75)',
            padding: 8,
            r: 5,
            zIndex: 6
        })
        .add();
    },
    redraw: function() {
        var point = this.series[0].points[2];
        this.renderer.label(
                '<div class="text-center">GOAL TO REACH</div>', 270, 50, 'callout', point.plotX + this.plotLeft, point.plotY + this.plotTop
        )
        .css({
            color: '#FFFFFF'
        })
        .attr({
            fill: 'rgba(0, 0, 0, 0.75)',
            padding: 8,
            r: 5,
            zIndex: 6
        })
        .add();
    }
 }

当图表的宽度改变时，我希望标签跟随该点。

我尝试使用工具提示，但在前两列禁用它时遇到问题。我可以重新绘制工具提示，但无法从所有其他列中禁用它

Answer 1

查看这个更新的 JSFiddle

我在全局范围内添加了一个变量var theLabel;

然后在图表初始绘制上，设置 theLabel = chart.renderer.label(...)

然后

redraw: function() {
    theLabel.destroy();
        point = this.series[0].points[2];
        theLabel = this.renderer.label('<div class="text-center">Reach 10 active subscriptions<br/>and enjoy a one year FREE membership!</div>', this.plotWidth - 200, 50, 'callout', point.plotX + this.plotLeft, point.plotY + this.plotTop)
    .css({
      color: '#FFFFFF'
    })
    .attr({fill: 'rgba(0, 0, 0, 0.75)',
      padding: 8,
      r: 5,
      zIndex: 6
    })
    .add();
}

注意在redraw:中:

1. 我调用 theLabel.destroy() 删除原始标签
2. 我将 chart 更改为 this
3. 我没有将其绘制在 x = 270 处，而是将其绘制在 this.plotWidth - 200 处，以使其或多或少位于图的右侧V 形始终指向红色条。

希望这对你有用