如何以適合桌面和移動人像和風景的響應方式顯示圖形？

Question

我想在div中顯示一個圖。

高寬比是高度的50％。

有問題的圖形看起來是這樣的：

http://simkimsia.github.io/500-charts/dygraphs/range-selector/

我如何以快速響應的方式這個div工作桌面和移動？在引導3

Answer 1

假設這個div負責圖形

<p>No roll period.</p> 
    <div id="noroll"></div> 

首先設置位置的div

<style type="text/css"> 
     #noroll { 
     position: absolute; 
     left: 10px; 
     right: 10px; 
     top: 40px; 
     bottom: 10px; 
     } 
    </style> 

然後，不要爲div添加任何高度或寬度樣式。

dygraphs js會自動調整大小。

參考：代碼https://github.com/danvk/dygraphs/blob/master/tests/resize.html 參考：例如http://dygraphs.com/tests/resize.html

Answer 2

您可以嘗試使用該影像，處理圖像響應的框架，如Bootstrap

的圖像可以通過添加.IMG響應類進行響應友好。這適用於最大寬度：100％;和高度：自動;到圖像，以便它可以很好地縮放到父元素。

或者迄今爲止一個更好的方法，使用圖表框架，例如（但不限於）http://www.chartjs.org/

Answer 3

我驚訝地發現，danvk示例工作，金正日棧說的方式：如果你刪除的位置是：絕對的，放在任何幅度設定則有沒有調整大小（我忘了發生了什麼，但它不愉快）。

我的另一個令人驚訝的原因是，我已經使用了Dygraphs多年，並且調整了我的大小，並且我沒有做任何這個位置：絕對爵士樂。我不是把圖中的表內：

<table style="margin:auto;width:90%;text-align:center;"><tr><td> 
    <div id="div_g"></div> 
</td></tr></table> 

而對於DIV我有以下幾點：

<style type="text/css"> 
    #div_g {height:320px;margin-top:50px;width=100%;} 
</style> 

也就是說，我下載danvk的例子，NoisyData功能和所有，並運行它如上。有用。我正在調整大小。 Chrome和Firefox都會在最窄的屏幕上傳遞它。

如果這不是很清楚，設置「top：40px」和「position：absolute」不會作爲可接受的HTML頁面佈局規則飛行（這裏的40px是爲了避免將圖形繪製在「調整窗口的大小，dygraph會調整它的大小。「

請特別注意，我發現它必要用這個設置來設置高度。

現在我承認，由於我無法弄清楚的原因，我最近剛剛設置了Dygraphs的兩個頁面之一就是最近給我的Google手機就緒失敗。我固定它在一個痛苦的方式通過指定Dygraph的div容器寬度如下：

function adjustStyle(width) { 
    var width = parseInt(width); 
    if (width < 480) { 
    $(".dygraphplot").attr("style", "height:290px;max-width:290px;margin-bottom:10px;"); 
    } else if (width < 540) { 
    $(".dygraphplot").attr("style", "height:320px;max-width:480px;margin-bottom:10px;"); 
    } else if (width < 600) { 
    $(".dygraphplot").attr("style", "height:320px;max-width:540px;margin-bottom:10px;"); 
    } else if (width < 640) { 
    $(".dygraphplot").attr("style", "height:320px;max-width:600px;margin-bottom:10px;"); 
    } else if (width < 720) { 
    $(".dygraphplot").attr("style", "height:320px;max-width:640px;margin-bottom:10px;"); 
    } else if (width < 750) { 
    $(".dygraphplot").attr("style", "height:320px;max-width:720px;margin-bottom:10px;"); 
    } else if (width < 768) { 
    $(".dygraphplot").attr("style", "height:320px;max-width:750px;margin-bottom:10px;"); 
    } else if (width < 800) { 
    $(".dygraphplot").attr("style", "height:320px;max-width:768px;margin-bottom:10px;"); 
    } else if (width < 1080) { 
    $(".dygraphplot").attr("style", "height:320px;max-width:800px;margin-bottom:10px;"); 
    } else if (width < 1200) { 
    $(".dygraphplot").attr("style", "height:320px;max-width:1080px;margin-bottom:10px;"); 
    } else if (width < 1440) { 
    $(".dygraphplot").attr("style", "height:320px;max-width:1200px;margin-bottom:10px;"); 
    } else if (width < 1536) { 
    $(".dygraphplot").attr("style", "height:320px;max-width:1440px;margin-bottom:10px;"); 
    } else if (width < 1538) { 
    $(".dygraphplot").attr("style", "height:320px;max-width:1536px;margin-bottom:10px;"); 
    } else if (width < 1600) { 
    $(".dygraphplot").attr("style", "height:320px;max-width:1538px;margin-bottom:10px;"); 
    } else { 
    $(".dygraphplot").attr("style", "height:320px;max-width:1538px;margin-bottom:10px;"); 
    } 

}

見JQuery的面板上this page用於該功能的文件準備調用。當然，「dygraphplot」是我給Dygraph div的一個類的名字。

如果我能找出爲什麼我的其他網頁仍然沒有這個工作，我會回到那個方案。