Изменение размера высоты с помощью Highcharts
У меня есть Highchart, который значительно изменяет размер ширины при изменении размера окна. Но не высота. Я попробовал этот набор размеров диаграммы, но он не работает proberly. Есть ли другой способ автоматического изменения высоты при изменении размера окна?
Это мой код css для вывода. У меня есть вкладка пользовательского интерфейса JQuery, другая вкладка отображает данные datatable
#output-container
{
float: right;
display: inline;
position: absolute;
right: 10px;
left: 400px;
top:120px;
overflow-y: auto;
}
Это мой css для chartdiv:
#chartContainer{
margin: auto;
}
И это функция js Chart:
function qchart(){
chart = new Highcharts.Chart({
chart: {
renderTo: 'chartContainer',
type: 'column',
spacingBottom: 3,
//height: (screen.availHeight)-500,
marginRight: 30,
marginBottom: 30,
reflow: true
},
//etc..
};
//...
}
Ответы
Ответ 1
Ответ Рикардо правильный: иногда вы можете оказаться в ситуации, когда контейнер просто не изменяет размер по мере необходимости, так как окно браузера меняет размер, тем самым не позволяя высочайшим параметрам изменять размер.
Это всегда работает:
1. Настройте прослушиватель событий с временным временем и конвейером. Пример с 500ms на jsFiddle
2. используйте chart.setSize(width, height, doAnimation = true);
в своей фактической функции изменения размера, чтобы динамически устанавливать высоту и ширину
3. Задайте reflow: false
в параметрах highcharts и, конечно же, задайте height
и width
явно при создании. Поскольку мы будем выполнять собственную обработку событий изменения размера, нет необходимости перехватывать Highcharts в другом.
Ответ 2
В соответствии со ссылкой на API:
By default the height is calculated from the offset height of the containing element. Defaults to null.
Таким образом, вы можете управлять им height
в соответствии с родительским div с использованием события redraw
, которое вызывается при изменении его размера.
Ссылки
Ответ 3
Вы должны явно указать высоту контейнера
#container {
height:100%;
width:100%;
position:absolute; }
fooobar.com/questions/199834/...
документация по высоким стандартам
Ответ 4
У меня была аналогичная проблема с высотой, за исключением того, что моя диаграмма находилась внутри модального всплывающего окна bootstrap, и я уже контролирую размер с помощью css. Однако по какой-то причине, когда окно было изменено горизонтально, высота контейнера диаграммы будет расширяться бесконечно. Если бы вы перетащили окно туда и обратно, оно будет расширяться вертикально бесконечно. Мне также не нравятся жестко-кодированные решения для высоты и ширины.
Итак, если вы делаете это в модальном, объедините это решение с событием изменения размера окна.
// from link
$('#ChartModal').on('show.bs.modal', function() {
$('.chart-container').css('visibility', 'hidden');
});
$('#ChartModal').on('shown.bs.modal.', function() {
$('.chart-container').css('visibility', 'initial');
$('#chartbox').highcharts().reflow()
//added
ratio = $('.chart-container').width() / $('.chart-container').height();
});
В тех случаях, когда "отношение" становится отношением высоты/ширины, вы измените размер, когда мода загрузочного модального размера изменится. Это измерение принимается только при открытии модального режима. Я сохраняю соотношение как глобальное, но это, вероятно, не самая лучшая практика.
$(window).on('resize', function() {
//chart-container is only visible when the modal is visible.
if ( $('.chart-container').is(':visible') ) {
$('#chartbox').highcharts().setSize(
$('.chart-container').width(),
($('.chart-container').width() / ratio),
doAnimation = true );
}
});
Таким образом, вы можете перетащить экран в сторону (изменив его размер), и ваша диаграмма сохранит соотношение сторон.
Широкоэкранный
![введите описание изображения здесь]()
против меньшего
![введите описание изображения здесь]()
(все еще возится с единицами vw, поэтому все в спине слишком мало, чтобы читать LOL!)