どうも！LSSです！！
【CSS】お手軽（？）な円グラフの描き方【小ネタ】 - Little Strange Software
【CSS】お手軽円グラフの文字入れ・その他 - Little Strange Software
で円グラフをCSSで表現する事に挑戦しましたが、その際にコメントでいただいた「棒グラフもできますね」をやってみました。（また凡例無しバージョンです^^;）
棒グラフ
コード
<style>
#bargraph{
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/*目盛り線*/
;
}
</style>
<div id="bargraph"></div>
コード解説
棒グラフの棒以外の部分について先に書きます。
まず、
width:300px;
height:300px;
これがグラフ全体の幅と高さを設定しています。
以下、グラフの内容は全て%で指定しているので、この値を書き換えるとグラフ全体が伸縮する事になります。
次にbackgroundプロパティ内の最後の部分。
,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/*目盛り線*/
３つのlinear-gradientですが、/*と*/で囲んだコメントの通り、グラフの縦軸・横軸・目盛り線を描いています。
左からグラフ幅の10%分右の位置に縦軸、上からグラフ高さの90%下の位置に横軸、そして「左右は全域、縦は上辺から横軸の高さ90%まで」の範囲に、「その範囲内に10%ごとに目盛り線」を入れている、という事になります。
６本の棒グラフについて
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がそれぞれ棒に対応しています。
一行目の棒を例にとって解説します。
linear-gradient(0deg,#888844 50%,transparent 50%) 20% 0%/8% 90% no-repeat
このコードのうち、#888844が棒の色を指定している部分となります。
そして２つある50%がその棒の高さ。これは２つとも同じ値を指定します。
次に、20% 0%ですが、これは棒の描画開始位置で、この場合「左から20%の位置」に棒を配置しています。（background-positionに該当する指定）
今回の例では、棒ごとに15%づつ増やしているので、棒の横感覚が均等に開いています。
※background-positionに%で位置指定する場合、少々クセのある指定となります。
厳密に言うと「左から20%の位置に棒の左から20%の位置がくるように調整される」となります。
最後に、8% 90%ですが、これは棒の「100%の場合の」サイズです。
8%が棒の幅サイズで、ここを変える事で太さを変更する事ができます。
後ろの90%は棒の高さですが、これは「グラフの上辺から横軸まで」の高さとするために90%にしています。
棒を変更する際には、
linear-gradient(0deg,#888844 50%,transparent 50%) 20% 0%/8% 90% no-repeat
のうち、色付きで示した部分のみ書き換えて使用できます。
あとがき
サンプルの例のうち、最後の棒の配置・サイズが
95% 0%/8% 90%
となっています。
「あれ？横95%の位置から8%幅だと103%になってグラフをはみだしそうなものだけど、まだ横に余裕がある表示になるのはなぜ？？」
としばし悩みましたｗ
ちなみに95%を100%にすると、グラフの右端に張り付いて表示され、0%にすると左端に張り付いて表示されます。
で、background-positionについてググってみると、
の「パーセント値について」の項目を読んでやっと理解しました^^
…っと、そういえば以前にもそう認識していた事をそこで思い出し…忘れがちな話ですね^^;;;
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
