Блог

Я использую mootools 1.2 на странице, где я загружаю js-график в div, который сам находится в ячейке таблицы. График загружается правильно, но он намного меньше ширины ячейки (сценарий graph предназначен для генерации графика того же размера, что и div).

Мой вопрос: как вы можете динамически устанавливать размер div на основе размера его родительского контейнера (вместо того, чтобы устанавливать фиксированную ширину div в пикселях).

Я хотел бы установить размер div с помощью mootools setStyle на domready, вот так (все завернуто в domready блок):

 var divwidth    = $('my_chart').offsetParent.offsetWidth;
var divheight   = $('my_chart').offsetParent.offsetHeight;
$('my_chart').setStyle('width', divwidth);
$('my_chart').setStyle('height', divheight);

g           = new Dygraph($('my_chart'), data);
  

Когда я запускаю страницу без setStyle, это работает, но div возвращает ширину 480 при выполнении $('my_chart').getStyle('width'); из консоли js. Однако $('my_chart').offsetParent.offsetWidth из той же консоли возвращается значение 1100.

Проблема в том, что когда я пытаюсь установить размер div с помощью приведенного выше кода, он выдает ошибку: Uncaught TypeError: Cannot read property 'offsetWidth' of null Я полагаю, потому что div еще не нарисован?

Отредактируйте, чтобы добавить: если я установлю ширину my_chart div на «auto», я получу сообщение об ошибке Uncaught TypeError: Cannot read property 'length' of undefined из скрипта graph.

Спасибо за любую помощь.

http://jsfiddle.net/dimitar/c7GTA/

jsfiddle тут же возвращается к вам.

проблема в том, что этот инструмент использует canvas. и это похоже на то, нужно ли установить ширину canvas на заданное значение.

 var c = document.id("mychart");
c.setStyle("width", c.getParent().getSize().x);

new Dygraph(document.id("mychart"),
"Date,Temperaturen"   "2008-05-07,75n"   "2008-05-08,70n"   "2008-05-09,80n"
);
  

это работает нормально, но изменение размера таблицы сделает это странным.
используйте .getSize(), который возвращает объект со свойствами x и y для ширины и высоты. не доверяйте вычислениям, основанным на css / style.