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 に答える