Адаптивные размеры радиолокационной карты ApexCharts React.js - PullRequest
Новая
       10

Адаптивные размеры радиолокационной карты ApexCharts React.js

0 голосов
/ 18 октября 2019

Я пытаюсь заставить мою радиальную диаграмму, полученную от ApexCharts, реагировать на ее масштабирование (используя его в моем веб-приложении React.js). Я пробовал несколькими способами, например, установить прослушиватель событий на изменение размера окна и обновить переменную состояния, из которой я получаю ширину, или обновить ее автоматически, создавая своего рода медиа-запрос JS (изменить его невозможноразмер через css, поскольку это SVG), но ничего не помогло.

Еще одна попытка работает с использованием кода в componentDidMount, но, конечно, только если я перезагружаю страницу, потому что компонент должен быть смонтирован.

Я опубликую соответствующий код здесь, ниже, из попытки прослушивания событий. 

state = {
  elemWidth: 500,
  many options about the chart, like colors and blabla..
}

componentDidMount() {
          window.addEventListener('resize', () => {
          let widthElem = window.innerWidth * 0.50;
          this.setState({elemWidth: widthElem})
        })
}

render() {

return (

          <div className='Chart'>
            <ReactApexChart  options={this.state.options} series={series} type="radar"  width={`${this.state.elemWidth}`} />
          </div>

}



        );
...