Соотношение сторон чертежа

Question

Как вы определяете соотношение сторон графика? Я работаю над панелью инструментов, где, когда вы нажимаете на статическую диаграмму png, она меняется на высокий уровень. Проблема в том, что области графика моей статической диаграммы более квадратные, в то время как highchart по умолчанию - более широкое соотношение сторон.

Есть ли способ указать, какое соотношение сторон я хочу для диаграммы без указания фиксированной ширины и высоты?

EDIT:

объяснить лучше, когда я использую DIV как цель моей диаграммы, он заполняет ширину правильно, но высота, кажется, чтобы решать какие-то переменной отношения сторон, которые я не знаю, как изменение.

EDIT2:

Могу ли я указать, например, для всех моих графиках:

chartHeight = chartWidth * 0,75?

Answer 1

Да, вы точно можете!

Так как вы хотите, чтобы все чарты в приборной панели, чтобы иметь те же размеры, я хотел бы предложить следующее:

1) Определите базовый стиль, который будет использоваться совместно все ваша контейнерной дива. Здесь вы зададите ширину и высоту, которые являются общими для всех из них.

// in your stylesheet: 
.chartStyle { 
    width: 100%; 
    height: auto; 
} 

<!-- in your HTML code: --> 
<div id="container" class="chartStyle"></div> 
<div id="container2" class="chartStyle"></div> 

2) В коде диаграммы, прежде чем устанавливать какие-либо параметры диаграммы, установить ширину и переменные высоты, которые рассчитываются на основе текущих размеров первого контейнера DIV (так как все они имеют одинаковую ширину и высоту) ,

var myWidth = $('#container').width(); 
var myHeight = $('#container').width() * 0.75; 

3) В параметрах каждого графика задайте атрибуты ширины и высоты для переменных, которые вы указали ранее.

chart: { 
    width: myWidth, 
    height: myHeight 
}, 

Теперь каждая диаграмма должна отображать в указанном формате.

Вот скрипку с этой установкой: http://jsfiddle.net/brightmatrix/eaut2jcs/

Для бонусных очков, вы можете установить $(window).resize событие, чтобы обновить переменные ширины и высоты и перерисовки графики, если пользователи изменить размер окна браузера.

Одно замечание: Браузер не может точно рассчитать размеры скрытых элементов div. Если вы используете display: none или visibility: hidden, чтобы скрыть диаграммы div до перехода от статического PNG к интерактивной диаграмме, вам может потребоваться установить более явные значения против процентов, когда пользователь нажимает на PNG.