0

我有一个条形图（jqplot）。无论屏幕分辨率如何，如何让它填满整个屏幕？像这个：https://www.desmos.com/calculator。当窗口改变时，它会自动调整图表的大小。

4

1 回答 1

0

对我有用的是这个（改编自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>

关键是将处理程序绑定resize到window. 有了这个，您可以获得窗口的大小，进而修改绘图容器的高度。我们需要以这种方式修改高度，因为resize事件似乎只影响绘图的宽度。

我在这里的示例将绘图设置为窗口高度的 75% - 您需要对其进行调整以满足您的要求。

于 2012-12-05T20:36:09.153 回答