如何才能使我的Jchartfx区域图显示在我的网格视图下？

Question

我的页面呈现像这个这一样，图形一直显示在左上角，尽管它应该出现的div位于正确的位置(在网格视图下)。

var chart1;
function makeGraph(mpy)
{
    if (mpy == undefined) mpy = 12.00;
    chart1 = new cfx.Chart();
    chart1.getData().setSeries(1);
    chart1.getAxisY().setMin(baseRoi-50);
    chart1.getAxisY().setMax(finalroi+50);
    var series1 = chart1.getSeries().getItem(0);
    series1.setGallery(cfx.Gallery.Area);
    var data=genGraphData(mpy);       
    chart1.setDataSource(data);
    var divHolder = document.getElementById('ChartDiv');
    chart1.create(divHolder);
}

我的html看起来像

<div id="pnlROIDetails">
<label id="lblRoiResult"> </label>
<div id="pnlROIChart">
    <label id="lblHelp">Help</label>
    <div id="jqxgrid" style="font-size: 13px; font-family: Verdana; float: left;"> </div>
</div>
<div id="pnlROIGraph" style="clear:both">
    <div id="ChartDiv" style="width:700px;height:500px; float:left;">
    </div>
</div>

我假设所有这些都可以用css解决，我只是不确定如何解决。任何帮助都是非常感谢的，谢谢！

Answer 1

我建议使用相对和绝对的位置，以迫使您的网格停留在它的包装内。

但是，根据你给出的图片，我很难分辨出哪个div是网格。我想#ChartDiv和#chartWrapper是一样的(在下面的例子中)，#chart可能是下一个，但是我需要您通过能够用开发工具高亮显示实际的网格来确认这一点，就像您对图像所做的那样。

因此，解决方案如下：#chartWrapper { position:relative; } #chart { position:absolute; top:0px; left:0px; }

绝对定位的项目计算它的参考点作为最近的父与位置:相对样式。因此，对于上面的示例，#chart将是从#chartWrapper顶部的0px，从左边的0px。

希望这能帮上忙！