使用Retina显示屏上的Flot创建高分辨率图表

Question

我想在我的网络应用程序中显示一些简单的图表,但在带有Retina显示屏的Apple设备上使用Flot看起来很模糊.

我使用'普通'视口设置:

<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>

这就是我得到的:

因此window.devicePixelRatio,默认情况下Flot不会使用,所以我想帮助一些自定义代码:

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(绘图后),但它看起来仍然不清晰.