Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS】棒グラフも文字入れ

 どうも!LSSです!!

 

little-strange.hatenablog.com

で作った棒グラフも、

【CSS】お手軽(?)な円グラフの描き方【小ネタ】 - Little Strange Software


【CSS】お手軽円グラフの文字入れ・その他 - Little Strange Software

と同様に文字を入れてみました。

 

 

棒グラフ 文字入り

栗田
曽根
花山
玄藤
敷島
100
50

 

 

コード

<style>
#bargraph{
position:relative;
width:300px;
height:300px;
background:
linear-gradient(0deg,#888844 50%,transparent 50%) 20% 0%/8% 90% no-repeat
,linear-gradient(0deg,#888844 32%,transparent 32%) 35% 0%/8% 90% no-repeat
,linear-gradient(0deg,#884444 72%,transparent 72%) 50% 0%/8% 90% no-repeat
,linear-gradient(0deg,#444488 15%,transparent 15%) 65% 0%/8% 90% no-repeat
,linear-gradient(0deg,#888844 45%,transparent 45%) 80% 0%/8% 90% no-repeat
,linear-gradient(0deg,#888844 65%,transparent 65%) 95% 0%/8% 90% no-repeat

,linear-gradient(90deg,transparent 10%,#000000 10% 11.5%,transparent 11.5%)/*縦軸*/
,linear-gradient(180deg,transparent 90%,#000000 90% 91.5%,transparent 91.5%)/*横軸*/
,repeating-linear-gradient(180deg,#aaaaaa 0% 1%,transparent 1% 10%) 0% 0%/100% 90% no-repeat/*目盛り線*/
;
}
.barfont{
position:absolute;
color:#ffffff;
text-shadow:0px 0px 2px #000000;
font-weight:bold;
writing-mode:vertical-rl;
}
.barlbl{
position:absolute;
font-size:60%;
}
</style>
<div id="bargraph">
<div class="barfont" style="left: 17%; top: 50%;">栗田</div>
<div class="barfont" style="left: 31%; top: 65%;">曽根</div>
<div class="barfont" style="left: 44.5%; top: 30%;">花山</div>
<div class="barfont" style="left: 58%; top: 78%;">玄藤</div>
<div class="barfont" style="left: 72%; top: 54%;">敷島</div>
<div class="barfont" style="left: 86%; top: 36%;">根室</div>
<div class="barlbl" style="left: 0%; top: 0%;">100</div>
<div class="barlbl" style="left: 0%; top: 45%;">50</div>
</div>

 

赤太字部分が今回の追加部分です。

 

 

円グラフの時とほぼ同じ

【CSS】お手軽円グラフの文字入れ・その他 - Little Strange Software

グラフとなるdivタグ内に、それぞれの文字のdivタグを入れ、ここに位置を調整しています。

今回はクラスを設定し、共通設定となる部分を

.barfont{
position:absolute;
color:#ffffff;
text-shadow:0px 0px 2px #000000;
font-weight:bold;
writing-mode:vertical-rl;
}
.barlbl{
position:absolute;
font-size:60%;
}

と指定した上で、それぞれの位置だけ
<div class="barfont" style="left: 17%; top: 50%;">栗田</div>
styleオプションで個別に設定する形を取りました。

…なんとなく%で指定してますが、px指定でもOKです^^

 

 

余録

棒グラフを描く際に、背景に当たる部分を transparent に指定していました。
それゆえに、↓こんな事もできます。

 

栗田
曽根
花山
玄藤
敷島
100
50

 

 

やり方は、コード中「,repeating-linear-gradient…」の次の行に、

,repeating-linear-gradient(180deg,#aaaaaa 0% 1%,transparent 1% 10%) 0% 0%/100% 90% no-repeat/*目盛り線*/
,url('画像ファイルのURL') 0px 0px/300px 300px
;
}

のように さらにカンマ区切りで「,url('画像ファイルのURL') 0px 0px/300px 300px」を追加(画像ファイルのURLのところは画像ファイルのURLに置き換え)するだけで背景に選んだ画像が表示されます。
※300px 300pxにサイズ指定しているので、正方形の画像でない場合、縦横比が狂いますが、例えば横長画像の場合 450px 300pxにするなど適度に調整が必要かも。

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^