• 2018-08-01
ウズマスター戦記
ウズマスター戦記 https://www.uzumax.org/2018/08/django-widthratio.html

Djangoのテンプレートタグ 「widthratio」比率計算

日本一平凡なDjangoバナー

タグ「widthratio」は、「分子となる数字」を「分母となる数字」で割って、そこに定数を掛けるという比率計算を提供する機能に役立ちます。

どういう時に使うのか?

widthratio はバーチャートを作る時に出番が来るタグですね。

公式では画像を使っていますが、バーチャートくらいはスタイルシートで実現するのが良いでしょう。

例えばですね、


  • 全体合計を300pxという横幅とする。
  • 全体合計の一部である「分類1」は30%に相当するので、100pxの横幅にしたい。


こういう条件でバーチャートを書くとします。
そういう時、HTMLは以下のようなソースです。

全体:<div style="height:20px;width:300px;background-color: #0000ff"></div>
分類1:<div style="height:20px;width:100px;background-color: #dc143c"></div>

これを画面に表示するとこうなります。


この際に「分類1のwidthは100pxだ」ということを動的に算出してくれるのがwidthratioなのです。

widthratioの使い方

widthratioタグは以下のように書きます。

  • {% widthratio value1 value2 value3 %}

そしてwidthratio実行時の計算式は「value1 ÷ value2 × value3」です。


  • value1:分類1の実数に相当
  • value2:全体の実数に相当
  • value3:全体の横幅と同じ

だから、全体の金額が210円、分類1の金額が70円だったりする場合は、上のソースと同じ結果は以下のように書くことが出来ます。

全体:<div style="height:20px;width:300px;background-color: #0000ff"></div>
分類1:<div style="height:20px;width:{% widthratio 70 210 300 %}px;background-color: #dc143c"></div>

value3の所に1をセットすればパーセンテージが出力されます。

使い方次第で便利に活躍してくれそうなタグです。

0 件のコメント:

コメントを投稿

お気軽にコメント下さい。