Позиционирование кнопки SVG при изменении размера старших графиков

Question

Я использую libchary highcharts для рендеринга круговой диаграммы.Демонстрация Stackblitz здесь

Чтобы отобразить две дополнительные кнопки для переключения валют и процентов, я использовал 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. Полный размер:

Изменить размер меньшего экрана:

Answer 1

Опираясь на принятый ответ, нужно было внести следующие изменения, чтобы он заработал:

1.Swap 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();

На событии перерисовки диаграммы пришлось уничтожить кнопки и добавить их снова, как показано ниже:

events:{

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

Рабочий стакблиц здесь: здесь

Надеюсь, это поможет!

Answer 2

Попробуйте, как показано ниже, вы можете получить текущие координаты

Но убедитесь, что вы перерисовываете кнопки при изменении размера страницы

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