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

这就是我得到的：

所以很明显，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（在绘图之后），但它看起来仍然不清晰。