Добавление полосы прокрутки к полотну Рафаэля - PullRequest
Новая
       1

Добавление полосы прокрутки к полотну Рафаэля

2 голосов
/ 06 июня 2011

Я могу сгенерировать диаграмму Рафаэля, но она превышает указанную ширину и высоту холста Рафаэля.

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

Существуют ли другие способы или обходные пути для решения вышеуказанного случая?

Пожалуйста, помогите.Заранее спасибо.

1 Ответ

6 голосов
/ 16 июня 2011

Я столкнулся с подобным случаем, и я нашел способ, который работает, хотя это немного глупо.Моей первой попыткой была установка высоты и overflow:auto для контейнера div, а также установка высоты бумаги Рафаэля на 100%.Однако это не сработало;Похоже, что если вы установите бумагу на 100%, она получит высоту элемента div, равную до диаграммы, поэтому это не годится.

Однако, обходной путьчтобы сделать следующее, предполагая, что у контейнера div есть идентификатор «holder», что мне нужно, чтобы прокручиваемая область была высотой 100px, и что бумажный объект Raphael должен иметь ширину 800px: 

var paper = Raphael('holder', 800, '100%');
// add your graphics to the paper object here

var height = $(paper.canvas).outerHeight();
paper.setSize(800, height);
$(paper.canvas).parent().height("100px");

Iиспользовал jQuery, чтобы получить и установить высоту, но вы можете сделать это как хотите.Важно не устанавливать никаких ограничений на высоту до тех пор, пока вы не создадите все объекты Рафаэля, а затем установите высоту бумажного объекта и содержащего его элемента в соответствии с вашими предпочтениями.

Обратите внимание, что есливы просто хотите, чтобы все отображалось, и вам не нужно вписывать графику в определенную высоту с помощью полос прокрутки, вы можете просто передать 100% в качестве высоты конструктору бумаги и забыть все после первой строки примера выше.

...