我正在使用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();


在完整尺寸的窗口上,饼形图看起来很合适,但是在减小浏览器尺寸的按钮上,麻烦了。
如何在浏览器上重新定位按钮的大小。

这是图像:


全尺寸:


javascript - SVG呈现了在调整大小图表上的按钮重新定位-LMLPHP


调整较小的屏幕尺寸:


javascript - SVG呈现了在调整大小图表上的按钮重新定位-LMLPHP

最佳答案

试试看,如下所示,您可以获得当前坐标
但是请确保您在页面大小调整时重新呈现按钮

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

10-05 20:51
查看更多