0

我正在使用角度图表在我的页面上创建条形图。我只希望将高度设置为 80，这样它就不会占用我的页面太多。问题是，当页面大小减小时，例如在移动设备上，图表会自行挤压，因此不清晰。如果我没有设置画布高度，那么它在桌面上太大了，但在小于 768px 的屏幕尺寸上看起来很棒。

当屏幕尺寸高于 768 像素时，如何将画布高度设置为 80，并让它默认为任何较小的尺寸。或者将画布高度设置为高于 768 像素的 80 和任何更小的画布高度为 150。

我一直在拔头发试图弄清楚这一点。

HTML：

<div class="chart-wrapper">
  <div class="chart-title">
    <b>Annual Sales</b>
  </div>
  <div class="chart-stage" ng-controller="BarCtrl">
    <div>
      <canvas id="bar" class="chart chart-bar"
                    chart-data="data" chart-labels="labels" chart-series="series">
      </canvas>
    </div>
  </div>
</div>

我尝试了一些不同的东西，但画布大小根本没有改变。

这是我的最后一次尝试：

$(document).ready(function() {
    var $window = $(window);
    var canvas = $('canvas')[0];
    var checkWidth = function() {
        var windowsize = $window.width();
        if (windowsize > 768) {
            canvas.height = 80;
        }
    };
    checkWidth();
    $(window).resize(checkWidth);
});

我应该注意，我试图保持画布宽度覆盖屏幕的整个宽度。这就是为什么我在较小的屏幕上获得挤压效果的原因。

这是我一直在使用的代码笔：点击这里

这是小屏幕上的挤压效果：

在此处输入图像描述

当我尝试使用媒体查询并使用 CSS 设置高度时会发生以下情况（我认为有必要使用 javascript 设置）：

在此处输入图像描述

4

2 回答 2

0

一个香草 js 选项，我设置了 2 个高度属性，但您可能只需要设置 1 个

var viewWidth=document.documentElement.clientWidth || window.innerWidth || document.body.clientWidth;
var barHeight=150;
if(viewWidth>768) barHeight=80;

document.getElementById('bar').style.height=barHeight+'px';
document.getElementById('bar').height=barHeight;
于 2016-02-12T20:58:41.070 回答
0

你可以使用 CSS：

@media only screen and (min-width:768){
    .canvas {
        height: 80px;
    }
}

它比使用 js 方法要干净一些。而且，我相信，更快:)

于 2016-02-12T20:29:56.723 回答