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

尝试一下，如下所示，您可以获得当前的坐标

但是请确保在页面大小调整时重新呈现按钮

function a(callback){
console.log("calling callback");
   callback(true);
}

a(function(callback_res){
  console.log("callback_res", callback_res);
});

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)
   }
   

在这里工作：here

希望这会有所帮助！