Создавайте диаграммы высокого разрешения с помощью Flot на дисплеях Retina - PullRequest
Новая
       11

Создавайте диаграммы высокого разрешения с помощью Flot на дисплеях Retina

6 голосов
/ 14 декабря 2011

Я хочу показать простую диаграмму в своем веб-приложении, но использование Flot на устройстве Apple с дисплеем Retina выглядит размытым.

Я использую «нормальные» настройки окна просмотра:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

и этот контейнер для Flot для рисования:

<div id="placeholder" style="width: 300px;height:400px;"></div>

Вот что я получаю:

enter image description here

Так что очевидно, что Flot по умолчанию не использует window.devicePixelRatio, поэтому я хотел бы помочь с некоторым пользовательским кодом: 

var newWidth = $(chart.getCanvas()).attr("width") * window.devicePixelRatio;
var newHeight = $(chart.getCanvas()).attr("height") * window.devicePixelRatio;
$(chart.getCanvas()).attr("width", newWidth);
$(chart.getCanvas()).attr("height", newHeight);
chart.setupGrid();
chart.draw();

Это вФакт изменяет размеры холста, и они остаются такими же даже после рисунка.На iPhone 4S он говорит мне, что размеры холста теперь 600 * 800 (после рисунка), но он все еще не выглядит четким.

...