我有一个条形图 (jqplot)。无论屏幕分辨率如何，如何让它填满整个屏幕？就像这个:https://www.desmos.com/calculator .它会在窗口更改时自动调整图表大小。
最佳答案
对我有用的是这个(改编自 http://www.jqplot.com/deploy/dist/examples/area.html ):
<!DOCTYPE html>
<html>
<head>
<title>Filled (Area) Charts</title>
<script class="include" type="text/javascript" src="../jquery.min.js"></script>
<script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script class="include" type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
var l2 = [11, 9, 5, 12, 14];
var l3 = [4, 8, 5, 3, 6];
var l4 = [12, 6, 13, 11, 2];
var plot = $.jqplot('chart1b',[l2, l3, l4],{
stackSeries: true,
showMarker: false,
seriesDefaults: {
fill: true
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ["Mon", "Tue", "Wed", "Thr", "Fri"]
}
}
});
resizePlot(plot);
$(window).bind('resize', function(event, ui) {
resizePlot(plot);
});
});
function resizePlot($plot) {
$($plot.targetId).height($(window).height() * 0.75);
$plot.replot( { resetAxes: true } );
}
</script>
</head>
<body>
<div class="example-content">
<div id="chart1b"></div>
</div>
</body>
</html>
关键是将处理程序绑定(bind)到 window 的 resize 事件。有了它，您可以获得窗口的大小，进而修改绘图容器的高度。我们需要以这种方式修改高度，因为 resize 事件似乎只影响绘图的宽度。
我这里的示例将绘图设置为窗口高度的 75% - 您需要调整它以满足您的要求。
关于css - 可调整大小的图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13731132/