SVG 渲染按钮在调整大小的高图上重新定位

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();

Answer 2

在已接受的答案的基础上，必须进行以下更改才能使其正常工作：

1.交换plotHeight（对应y轴）和plotWidth（对应x轴）如下：

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

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

1. 图表的重绘事件必须销毁按钮并再次添加它们，如下所示：

   events:{
   
   redraw:(function(){
     this.curBtn.destroy();
     this.prcBtn.destroy();
     this.addButtons();
    }).bind(this)
   }
   

在这里工作 stacblitz：here

希望这会有所帮助！