0

角度チャートを使用して、ページに棒グラフを作成しています。高さを 80 に設定して、ページをあまり占有しないようにしたいだけです。問題は、たとえばモバイルでページのサイズを小さくすると、グラフが押しつぶされて読みにくくなることです。キャンバスの高さを設定しないと、デスクトップでは大きすぎますが、768px より小さい画面サイズでは見栄えがします。

画面サイズが 768px を超える場合にキャンバスの高さを 80 に設定し、それよりも小さいサイズにデフォルト設定するにはどうすればよいですか。または、キャンバスの高さを 768px の上では 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

CSS を使用できます。

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

js アプローチを使用するよりも少しクリーンです。そして、私は、より速いと信じています:)

于 2016-02-12T20:29:56.723 に答える