如何在highchart中创建响应式自定义标签

Question

我创建一个散点图，并在已指定的框上添加标签，我已设法制作标签，但当她的屏幕最小化时，请勿调整其标签的位置。

transient

我的完整代码是

labels: {
    items : [
    {
        html : 'Prioritas 4',
        style : {
            left : '380%',
            top : '60px',
            fontSize : '10px'
        }
    },
    {
        html : 'Prioritas 3',
        style : {
            left : '660%',
            top : '60px',
            fontSize : '10px'
        }
    }
    ]
},

}）;

Answer 1

在这种情况下，标签是静态的，因此除非您手动重绘它们，否则它们将无法响应。

我更喜欢另一种方式 - 您可以使用渲染器并完全控制渲染对象。使用帮助 axis.toPixels（）方法，您可以轻松地使它们响应并保持固定值。

在加载事件上创建项目：

load: function () {
    this.customTexts = [];

    var text = this.renderer.text(
            'Responsive text',
          this.xAxis[0].toPixels(15),
          this.yAxis[0].toPixels(50)
        )
            .css({
            fontSize: '10px'
          })
          .add();

    this.customTexts.push(text);
  },

在重绘事件上重绘项目：

 redraw: function () {
    this.customTexts[0].attr({
        x: this.xAxis[0].toPixels(15),
      y: this.yAxis[0].toPixels(50)
    });
  }

示例：http://jsfiddle.net/hfev4w7c/