Question

我正在寻找一个简单的解决方案，一旦父div大小改变（=浏览器大小更改），自动调整画布元素（图表）的大小。目前，我的Canvas元素仅在加载页面时完全适合父div。

这是我到目前为止所做的以及我尝试过的事情：

<div class="panel-body">
    <canvas id="userlogins"></canvas>
    <script type="text/javascript">
        jQuery(document).ready(function($)
        {
            var ctx = $("#userlogins").get(0).getContext("2d");
            var myLineChart = new Chart(ctx).Line(data, options);
        });


        function fitToContainer(canvas){
          // Make it visually fill the positioned parent
          canvas.style.width ='100%';
          // ...then set the internal size to match
          canvas.width  = canvas.offsetWidth;
        }

        var canvas = document.querySelector('canvas');
        fitToContainer(canvas);

        jQuery( window ).resize(function() {
            fitToContainer(canvas);
            redraw();
        });

    </script>
</div>

当我调整浏览器大小时，画布图表会消失。父页面适合页面加载效果很好。

编辑：给定“重复”中的方法对我不起作用！以下是我从“重复问题”中尝试过的内容：

jQuery( window ).resize(function() {
    clearTimeout(timerID);
    timerID = setTimeout(function() {
        var cnvs = $("#userlogins")[0];                  // cache canvas element
        var rect = cnvs.getBoundingClientRect();   // actual size of canvas el. itself

        cnvs.width = rect.width;
        cnvs.height = rect.height;
        redraw();
    });
});

Answer 1

看起来你正在使用ChartJS。如果是，则它具有一个属性，您可以设置该属性以使图表响应调整大小。

Chart.defaults.global.responsive = true;

Answer 2

更改画布元素的宽度或高度会清除画布。事实上，它通常被用作故意清除它的一种方式。所以这一行：

canvas.width  = canvas.offsetWidth;

清除你的画布。之后，您可以：

重绘图表
或删除该行并依赖CSS转换，这可能会破坏画布的比例

调整画布元素的大小

2 个答案: