Динамическая высота Highcharts с расположением таблицы

Возможно ли, чтобы высота диаграмм в следующем фрагменте кода автоматически изменялась так же, как и ширина (см. Jsfiddle ниже)?Динамическая высота Highcharts с расположением таблицы

<div class="chartTable"> 
    <div class="chartRow"> 
     <div id="chart1" class="leftContainer"></div> 
     <div id="chart2" class="rightContainer"></div> 
    </div> 
    <div class="chartRow"> 
     <div id="chart3" class="leftContainer"></div> 
     <div id="chart4" class="rightContainer"></div> 
    </div> 
</div>

http://jsfiddle.net/cmoowwm1/

Комментируя обратно в положение «: абсолютные» стили будут иллюстрировать, как я хотел бы, чтобы работать, но, очевидно, нужно все 4 графы в поле зрения.

источник

2015-04-09 dre

Вы можете поймать событие $ (window) .resize(), а затем вызвать [chart.setSize()] (http://api.highcharts.com/highcharts#Chart.setSize) с вычисленной шириной/высотой. –

Если возможно, я хотел бы добиться желаемого поведения, используя только CSS, а не манипулировать диаграммами, которые должны реагировать на дизайн. – dre

Если вы хотите использовать только CSS, вам нужно сохранить первую строку position:absolute.

Я использовал position:fixed для второго ряда и bottom: 0, чтобы держать его дно в сноске. Таким образом, это будет работать только для двухстрочной диаграммы. Вот DEMO того, что вы ищете.

источник

2015-04-11 05:46:27

Итак, вы говорите, что из-за абсолютного и фиксированного позиционирования это НЕ будет работать, если бы этот экран генерировался динамически, и в этом случае можно было бы создать несколько строк «двух диаграмм»? – dre

Я не полностью понял, что вы подразумеваете под этим предложением, но я имел в виду, что вы можете создать динамически сгенерированную страницу с двумя строками диаграмм (столько, сколько вы можете добавить в строку). Для более двух, мой путь не работает из-за ** 'position: fixed' **. Вы не можете использовать ** 'position: absolute' ** для каждой строки, потому что они будут перекрываться и перекрывать друг друга. –

Да, это именно то, что я имел в виду. Мне нужно создать несколько строк. С тех пор я решил эту проблему с помощью javascript в своем приложении, но я думаю, потому что я не упоминал об этом требовании в моем вопросе, ваш ответ является вполне приемлемым решением. – dre

Динамическая высота Highcharts с расположением таблицы

ответ

Смежные вопросы