如何以响应方式显示适用于桌面和移动纵向和横向的图形？

Question

我想在 div 内显示图表。

纵横比是高度占宽度的 50%。

有问题的图表如下所示：

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

如何使此 div 在桌面和移动设备上以响应方式工作？

Answer 1

您可以尝试将该图像与处理图像响应的框架一起使用，例如 Bootstrap

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

或者到目前为止更好的方法，使用图表框架，例如（但不限于）http://www.chartjs.org/

Answer 2

假设此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 3

我很惊讶地发现 danvk 示例按照 Kim Stacks 所说的方式工作：如果您删除 position:absolute 并输入任何宽度设置，则不会调整大小（我忘记了具体发生了什么，但它不愉快）。

我感到惊讶的另一个原因是，我多年来一直使用 Dygraphs 并调整大小，但我没有做任何 position:absolute 爵士乐。我改为将图表放在 table:

中

<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" 将不会作为 acceptable HTML 页面布局规则（这里是 40px是为了避免在 "Resize the window. The dygraph will resize with it."

之上绘制图形

请特别注意，我发现使用此设置需要设置高度。

现在我要承认，由于我无法弄清楚的原因，我最近以这种方式设置了 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;"); 
  }

}

请参阅 this page 上的 JQuery 面板了解此函数的文档就绪调用。当然 "dygraphplot" 是我给 Dygraph div.

的一个 class 的名字

如果我能找出为什么我的其他页面在没有所有这些的情况下仍然有效，我会回到那个方案。

如何以响应方式显示适用于桌面和移动纵向和横向的图形？

How do I show a graph in responsive way that works in desktop and mobile portrait and landscape?

html

css

responsive-design