javascript - SVG 渲染按钮在调整大小 Highcharts 上重新定位

Question

我正在使用 highcharts libaray渲染饼图。 Stackblitz 演示 here

为了呈现两个用于货币和百分比切换的额外按钮，我使用了 SVG Renderer在中心标题下方添加和居中按钮:

this.curBtn = this._chartPosition.renderer.button('$', 330, 220, (function(){
      console.log(false);
    }).bind(this),normalState,normalState1,pressedState,null,null).add();

    this.prcBtn = this._chartPosition.renderer.button('%', 344, 220, (function(){
      console.log(true);
    }).bind(this),normalState1,normalState1,pressedState,null,null).add();

在全尺寸窗口上，饼图看起来不错，但在缩小浏览器尺寸时按钮会失控。如何在浏览器调整大小时重新定位按钮。

图片如下:

1. 全尺寸:

1. 调整较小的屏幕:

Answer 1

试试这个，像下面这样你可以获得当前坐标

但请确保在页面调整大小时重新渲染按钮

this.curBtn = this._chartPosition.renderer.button('$', this._chartPosition.plotHeight/2 - 30,this._chartPosition.plotWidth/2 + 50, (function(){
      console.log(false);
    }).bind(this),normalState,normalState1,pressedState,null,null).add();

    this.prcBtn = this._chartPosition.renderer.button('%', this._chartPosition.plotHeight/2-12,this._chartPosition.plotWidth/2 + 50, (function(){
      console.log(true);
    }).bind(this),normalState1,normalState1,pressedState,null,null).add();