Как разместить столбцы в HighCharts

Question

У меня есть родительский контейнер с фиксированной шириной и высотой. Граф, который визуализируется с использованием высоких диаграмм, содержится внутри родительского контейнера. Может ли кто-нибудь сказать мне, что нужно сделать, чтобы сделать контейнер диаграммы прокручиваемым и правильно помещать метки и столбцы, чтобы все ярлыки были хорошо видны, а столбцы расположены на расстоянии. Пожалуйста, найдите jsfiddle для лучшего понимания https://jsfiddle.net/z5wqgkm9/

Пытались, позволяющий свитка с помощью

scrollbar: { 
      enabled: true 
      } 

Но это не очень помогает

Answer 1

Установка overflow: scroll на родительский DIV должны делать свою работу.

<div style="width:500px;height:600px; overflow: scroll;"> 
    <div id="recoranks" style="width: 400%; height: 100%; margin: 0 auto"></div> 
</div> 

пример: jsfiddle.net/z5wqgkm9/2

Answer 2

Проблема здесь в том, что Highcharts использует ширину контейнера для визуализации диаграммы. Поэтому независимо от того, что вы установили, он будет соответствовать ширине и высоте родительского контейнера.

Для того, чтобы сделать диаграмму более крупной по ширине или по высоте или по обеим сторонам и удерживая ее в пределах содержащегося окна со свитками, вы можете использовать свойство float, которое делает положение элемента не соответствующим родитель.

Вот что вам нужно сделать.

Первый. Добавить еще один контейнер для контейнера сверху главного div <div style="width:500px;height:600px">

Второй. дайте верхнему контейнеру класс css, скажем .main-container, и дайте внутреннему div класс css, скажем, .inner-container.

Так что ваш HTML будет выглядеть следующим

<div class="main-container"> 
    <div class="inner-container"> 
    <div id="recoranks" style="min-width: 100%; height: 100%; margin: 0 auto"> </div> 
    </div> 
</div> 

сейчас. Добавьте следующие классы css:

.main-container { 
    width:500px; 
    height:600px; 
    overflow-x:scroll; 
    overflow-y:hidden; 
} 

.inner-container { 
    width:700px; 
    height:580px; 
    float:left 
} 

И ваш весь набор.

Немного подробно о том, что мы сделали. Мы рассмотрели диаграмму div другим div. Этот верхний div будет контейнером с шириной и высотой, имеющим свитки. Мы дали ему ширину и высоту, которые мы хотим иметь в контейнере диаграммы. Также мы попросили его скрыть переполнение по оси y и сделать переполнение прокручиваемой до оси x, так как ваш сценарий только хочет прокручивать по горизонтали в зависимости от увеличенной ширины, чтобы четко добавлять интервалы в диаграммах. Вы можете изменить эти параметры переполнения в соответствии с вашими потребностями.

Что мы сделали с внутренним контейнером div div, сделаем его плавающим, чтобы он не соответствовал ширине родителя, поскольку родитель думает, что у него нет элемента блока, чтобы добавить в него пространство. Теперь ширина и высота, которые мы устанавливаем для этого контейнера с плавающей точкой, помогут контролировать фактическую ширину и высоту диаграммы, которые она будет отображать.

образца с вышеуказанным раствором с использованием коды: http://codepen.io/Nasir_T/pen/QGbxRw