Question

我正在使用this JSFIDDLE，它显示了如何将标签添加到图表中的某个点。在图表没有响应的情况下，这适用于固定标签的位置。更改小提琴的宽度，标签位于原始位置。我希望标签保持在最后一列的顶部。

我尝试过使用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:：

我致电theLabel.destroy()删除原始标签
我将chart更改为this
不是将其绘制在x = 270，而是将其绘制在this.plotWidth - 200，以便在情节的右侧获得或多或少的效果，而人字形总是指向红色条。

希望这适合你

Highcharts标签重绘

1 个答案: