将多个Dygraph作为PNG保存在移动设备上时呈现问题

我有一个使用Dygraphs创建图表的Web应用程序。将多个Dygraph作为PNG保存在移动设备上时呈现问题

该应用程序允许用户创建多个Dygraph图表（每个都有自己的Y轴），它们将堆叠在彼此之上。

下面是在PC浏览器上显示多个Dygraph的示例：请注意，该示例显示了三个不同的Dygraph，每个Dygraph都有自己的Y轴，但X轴对于前两个图表是隐藏的，底部图表。

我将允许用户将图表作为PNG保存到磁盘。 - 就我目前保存多个Dygraphs作为一个PNG是：

创建将用于包含所有可见Dygraphs
提取每个画布出每个Dygraph的目标画布上，然后将每个画布添加到目标画布**
创建通过.toDataURL一个PNG（）函数目标帆布

这里的是什么上面的截图看起来当保存为PNG一个类似的例子：（这正是我想从PNG）

该程序适用于PC上的浏览器。但是，当我尝试将多个Dygraphs保存到手机/平板电脑浏览器中的一个PNG中时，生成的PNG与屏幕上可见的图形不匹配。

例子：这里的多个Dygraphs看起来像在iPad（截图）什么

这里就是生成的PNG看起来像（请注意如何在每个排行榜中的宽度和高度不符合实际的iPad显示）。

我不明白为什么PNG在我使用PC浏览器时呈现正确，但在移动设备上使用浏览器时无法正确显示。

我不确定此问题是由于Canvas.toDataURL（）函数的限制，还是由于Dygraphs问题或其他原因造成的。我正在寻求建议，这可能会使我指出正确的方向并且/或者揭示这一特殊问题。

**我要指出，我用Juan Manuel Caicedo Carvajal's Dygraph-Export extension

来源

2016-09-23 Jed

我的OP解决方案中的问题的解决方法是修改Dygraph.getContextPixelRatio函数中的Dygraph源代码。在下面的代码

通知我设置devicePixelRatio = 1

dygraph-combined.js

Dygraph.getContextPixelRatio = function (context) { 
try { 
    //var devicePixelRatio = window.devicePixelRatio; 
    var devicePixelRatio = 1; // Hack!!! 
    var backingStoreRatio = context.webkitBackingStorePixelRatio || 
     context.mozBackingStorePixelRatio || 
     context.msBackingStorePixelRatio || 
     context.oBackingStorePixelRatio || 
     context.backingStorePixelRatio || 1; 
    if (devicePixelRatio !== undefined) { 
     return devicePixelRatio/backingStoreRatio; 
    } else { 
     // At least devicePixelRatio must be defined for this ratio to make sense. 
     // We default backingStoreRatio to 1: this does not exist on some browsers 
     // (i.e. desktop Chrome). 
     return 1; 
    } 
} catch (e) { 
    return 1; 
} 
};

在我而言，这个黑客固定我的问题（在OP说明）并没有对我的应用程序中使用Dygraphs的任何其他部分有负面影响。也就是说，如果你找到一个更好/正确的方法来解决OP中陈述的问题，请分享。

来源

2016-10-21 14:36:55 Jed

我猜问题发生，因为生成的画布没有完全呈现到一个iPad的屏幕响应。

你可以尝试导出帆布面料（而不是产生一个新的与上述库）自己与toDataUrl https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

Dygraphs产生2米的画布，一个传说，一个用于实际的图形，并奠定了他们互相之上。所以请确保你选择了正确的（不是_hidden_canvas）。如果示例有效，您可以使用canvas将图例绘制到图形画布上。drawImage（otherCanvas） How to Copy Contents of One Canvas to Another Canvas Locally

希望这有助于您。让我更新！

来源

2016-10-04 09:37:09

将多个Dygraph作为PNG保存在移动设备上时呈现问题

回答

相关问题