將多個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保存在移動設備上時呈現問題

回答

相關問題