我正在使用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();
在完整尺寸的窗口上,饼形图看起来很合适,但是在减小浏览器尺寸的按钮上,麻烦了。
如何在浏览器上重新定位按钮的大小。
这是图像:
全尺寸:
调整较小的屏幕尺寸:
最佳答案
试试看,如下所示,您可以获得当前坐标
但是请确保您在页面大小调整时重新呈现按钮
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();