Highchart, Как изменить размер автоматически, если данных много, а затем соответствующим образом масштабировать, чтобы все данные были видны

Highchart, Как изменить размер автоматически, если данных много, а затем соответствующим образом масштабировать, чтобы все данные были видны.
Link demo
Проблема в том, что в Football-Player информации так много, что диаграммы не могут показать их всю. Я хочу показать все данные без ограничений по размеру и высоте. просто показать все данные.

highcharts

17.03.2022 22:07

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете адаптировать высоту диаграммы к количеству точек. Ниже вы можете найти простую реализацию такой функции:

 let spacePerPoint;
 let allowChartRedraw = true;

 Highcharts.chart('container', {
   chart: {
     type: 'bar',
     width: 600,
     height: 600,
     events: {
       load() {
         spacePerPoint = this.plotSizeX / this.series[0].points.length;

         if (this.renderer.forExport) {
           Highcharts.drawTable(this);
         }
       },
       redraw() {
         if (allowChartRedraw) {
           allowChartRedraw = false;

           this.setSize(
             null,
             this.chartHeight - this.plotSizeX + this.series[0].points.length * spacePerPoint
           );


           allowChartRedraw = true;
         }
       }
     }
   },
   ...
 });

Живая демонстрация:https://jsfiddle.net/BlackLabel/cy7gd0ab/

Ссылка на API:https://api.highcharts.com/class-reference/Highcharts.Chart#setSize

18.03.2022 11:53