この棒グラフは弊社サイトへの ブラウザ別アクセス割合 です。
※モーションを見逃した方はお手数ですがリロードをお願いいたします
上記棒グラフの作成方法を、内容的には『棒グラフ自体の表示』『棒グラフ数値の表示』ついでなので『目盛り表示』について、ザックリと解説したいと思います。
まずベースとなる html 構造は下記になります。
<ol>
<li>
<dl>
<dt>chrome</dt>
<dd><p data-chart="63"></p></dd>
</dl>
</li>
・
・
・
</ol>
コンセプトは見ての通り【𝓣𝓗𝓔・𝓢𝓲𝓶𝓹𝓵𝓮】です。
棒グラフ部分をアニメーションさせたかったので、dd タグ内に p タグを入れ子にしていますが、本来なら下記のようにしたかったくらいです。
<dd data-chart="63"></dd>
この p タグ内に設定したカスタムデータ属性(data-*)を用いて『棒グラフ自体の表示』『棒グラフ数値の表示』を置換して行います。
本来であれば javascript を使用せず css のみで完結したかったのですが、今現在カスタムデータ属性(data-*)から css 内プロパティの値を、ゴニョゴニョすることが出来ないので『棒グラフ自体の表示』に関しては javascript にて css をDOM操作しております。
あくまでも私個人の予想ですが、近い将来必ず【カスタムデータ属性(data-*)から css 内プロパティの値をゴニョゴニョ】できるようになると思っております。
※SEO 的に考えれば pタグの中に普通に『63%』と書くべきですが…
今回はカスタムデータ属性(data-*)をゴニョるのがメインなのでスルーしてください
$("p").each(function(){
chart = $(this).data("chart");
$(this).css('width', chart + '%');
});
p タグ内に書かれた data-chart の値を、その p タグ自体の width としてDOM操作しております。
例:data-chart="50"
なら、その p タグ自体の長さは 50%
あとは親要素の dd タグに、アニメーション表示は1秒間で、タイムラグは1秒を基準として、各リスト毎に0.75秒づつ増加するように設定しております。
@for $i from 0 to 5{
li:nth-child(#{$i + 1}){
dd{
animation:chartBar 1s #{($i * .75) + 1}s 1 forwards;
}
}
}
@keyframes chartBar{
0%{width:0;}
100%{width:82.3333%;}
}
意外と知らない方が多いかと思いますが、css でも attr が使えます。
attr とは『アトリビュート(attribute)』 の略で、直訳すると『属性』ですが IT 用語的には主に『属性の値を取得する』的な意味合いで使用している気がします。
例えば title や href などの属性値を取得して疑似要素として表示したり、今回の棒グラフ数値のように、カスタムデータ属性(data-*)の値を取得して疑似要素として表示したりできます。
<p data-chart="63"></p>
p::after{
content:attr(data-chart) "%";
}
<ul>
<li><a href="https://www.smartvalue.ad.jp/">株式会社スマートバリュー</a></li>
<li><a href="https://www.northdetail.co.jp">株式会社ノースディテール</a></li>
</ul>
a::after{
content:"(URL:"attr(href)")";
font-size:10px;
}
ぶっちゃけ今回の記事内容からすると無関係な『目盛り表示』なのですが、地味に一番実装に悩み、時間をかけてしまったので『オマケ』として解説しておきます。
レスポンシブ(フルリキッド)対応する『棒グラフ表示エリア』を10等分する罫線を表示…
これって何気に難しくないですかね?
こんなことに悩むの私だけかしら…w
要素が多ければ疑似要素を使用すれば済む話ではありますが、今回のテーマは【𝓣𝓗𝓔・𝓢𝓲𝓶𝓹𝓵𝓮】なので、罫線を表示するためだけに要素を増やすのは本末転倒です。
で、最終的な実装は下記の通り『グラデーション背景』です。
li:{
background:linear-gradient(90deg, #000 2%, #fff 3%);
background-size:10%;
background-position:0;
}
ベタ塗りの横グラデーションを、黒2%幅(これが罫線になるヤーツ):背景色98%幅で設置し、あとは background-size で分割、background-position で開始位置を調整し表示するというカラクリですね。
ちなみに今回の棒グラフ表示例では、各リスト毎に背景色を変えているので、実際には下記のような【まどろっこしく面倒臭そうなゴリゴリ系scss】的な書き方になっております。
@for $i from 0 to 5{
li:nth-child(#{$i + 1}){
background:linear-gradient(90deg,
#000 2%, rgba(255 - ($i * 30),255 - ($i * 30),255 - ($i * 30),1) 3%);
background-size:8.25%;
background-position:1% 0;
dt{
background:rgba(255 - ($i * 30),255 - ($i * 30),255 - ($i * 30),1);
}
}
}
先日、情報が古くなっていたりしたらアレなので、シレ~っと直しとこかなぁ~的なノリで、自身のブログ記事を読み返してみました。
本当に今更でアレなのですが…
確実に『本文』よりも『オマケ』にチカラが入っている傾向にありますね…良くも悪くも。
私自身はそんな気は1mmもないのですが 確信犯 に見えますね。
いっそのこと、開き直って、技術とかまるで関係ナッシングな
【超オマケ記事】の作成を検討中です( ̄^ ̄)ゞ