Позиционирование и панорамирование / масштабирование Flot Chart в Android WebView - PullRequest
Новая
       25

Позиционирование и панорамирование / масштабирование Flot Chart в Android WebView

0 голосов
/ 06 ноября 2011

Я работаю над проектом Android, где у меня есть диаграмма Flot , работающая в PhoneGap .Вот как настроена моя HTML-страница, с макетом, обработанным jQuery Mobile :

  • Flot "заполнитель" div
  • Div, содержащий пользовательские кнопки, которые включаютманипуляции с диаграммой
  • Форма

Вот мои проблемы:

  • Как динамически изменить размер диаграммы Flot, чтобы она соответствовалапространство, доступное на экране? Прямо сейчас у меня установлен статический размер диаграммы, но я бы предпочел иметь возможность определять размер экрана (в режиме наземного пространства) и устанавливать для него ширину диаграммы.
  • Как включить панорамирование и масштабирование диаграммы? Мое приложение поддерживает эту функцию, когда оно запускается в стандартном браузере рабочего стола - там я выполняю панорамирование, щелкая и перетаскивая диаграмму, иЯ изменяю масштаб изображения, поворачивая колесо мыши над графиком.Когда я пробую эти вещи в эмуляторе Android, либо панорамируется все приложение (не только диаграмма), либо ничего не происходит (колесо мыши ничего не делает в эмуляторе).Как я могу панорамировать и масштабировать только сам график, а не все приложение?

1 Ответ

4 голосов
/ 26 сентября 2012

1) Просто создайте контейнер div с шириной стиля: 100%. Вы можете перерисовать график при изменении ориентации, добавив обработчик событий PhoneGap: 

$(window).bind('orientationchange', function(event) {
    $.plot($(graphId), .....
});

Вместо повторной инициализации графика можно изменить размер, вызвав: 

plot.resize();
plot.setupGrid();
plot.draw();

Это также может работать немного лучше.

Если вы чувствуете, что график не очищен правильно перед перерисовкой, вы можете принудительно очистить, используя: 

$(graphId).text('');

У меня возникли проблемы, когда граф находится внутри элемента div с data-role = content, просто удалите data-role.

...