我无法让 DyGraph 渲染到正确的高度。我的理想是图形是主浏览器区域高度的 100%。
即我希望它能填满导航栏和页脚之间的所有空间。
通过下面的设置,我得到了一个图表,但它只是一条水平线。我不想指定 px 高度,因为我想填充任何可用的房间。
_PnlDyGraph.cshtml:
<script type="text/javascript" src="dygraph-combined-dev.js"></script>
<h1>Title</h1>
<div id="mygrapharea" style="width: 100%; height:100%;"></div>
<script type="text/javascript">
@{
string txtER = (string)Session["PnlDataForChart"];
<text>
var dataT = "@txtER"
</text>
}
g = new Dygraph(document.getElementById("mygrapharea"),
dataT
);
</script>
_Traders.cshtml:
<div class="row">
<div class="col-sm-6">
@Html.Partial("~/Views/Employee/_PnlDyGraph.cshtml")
</div>
</div>
_Layoutcshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@*<title>@ViewBag.Title - Platform</title>*@
<title>Platform</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="~/Images/Banner_Front.png" alt="Banner" style="width:300px;height:50px;"/>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Traders", "Traders", "Traders")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
@*<p>© @DateTime.Now.Year</p>*@
</footer>
</div>
@*@Scripts.Render("~/bundles/jquery")*@
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
你应该把这个 div 写在另一个 div 中,并以像素为单位指定 div 高度,在内部 div 中你将以百分比指定。
没有内容,高度就没有计算百分比的价值。但是,如果未指定父级,则宽度将采用 DOM 的百分比。
例如。
<div id="parent" style="width:100px;height:1000px;background-color:orange">
<div id="mygrapharea" style="width:100px;height:100%; background-color:blue"></div>
</div>
希望对你有帮助