どうも!LSSです!!
で作った棒グラフも、
【CSS】お手軽(?)な円グラフの描き方【小ネタ】 - Little Strange Software
↓
【CSS】お手軽円グラフの文字入れ・その他 - Little Strange Software
と同様に文字を入れてみました。
棒グラフ 文字入り
コード
<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 に指定していました。
それゆえに、↓こんな事もできます。
やり方は、コード中「,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にするなど適度に調整が必要かも。
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^