まずはじめに、こんな事してみたい
こーんな感じのグラフ作ってみたい。(※実際に完成したグラフの画像です)
考察
個人だけでやるなら、グラフに特化したプラグインとか導入すれば簡単なんだろうけど...自作でできないか、まずは考える。
(※外部ライブラリーは、jQueryのみ使用)
それでは、デザインより最良の構造化を考えてみる。
- なるべく画像は使い回す。
- 読み込みのスピードを重視する。(表示相手はモバイルが対象なので)
- メンテナンスが楽になるように考える。
- 外部ライブラリは極力避ける。
- テーブルは、リキッド対応にする。(FOXDIE...じゃない)
- 数値は、各個別に設定も可能なようにする。
- また、グラフは一方方向ではなく、逆方向へも伸びるように設計する。
- リキッドなので、グラフもそれに合わせて、可動域内で動けるようにする。
- バーの長さは、実際のデザインと変わらない長さにする。
- 面倒なことは、プログラムに任せる。(※本音)
■コードと解説
コード
var getNum = function (elm) {
var elmt = elm;
// 四捨五入
var rqpas = Math.round($(elmt).data("num")*100);
return rqpas;
};
$(window).on('load',function () {
var elm = $('span');
for (var i=0; i < elm.length; i++) {
var pas = "";
if (getNum(elm[i])==1) {
pas += "1px";
}else{
pas += getNum(elm[i]) + "%";
}
if($(elm[i]).data("code")=="m"){
var pos = getNum(elm[i]);
$(elm[i]).css('margin-left', -pos+"%");
}else{
};
$(elm[i]).css('width',pas);
}
// ....アコーディオン用コード....
});
実際の動作 >>> Codo.pen
解説
まずは、オブジェクト化されたデータを受け取る為に、getNum
を作る。
データを引き渡すそこで計算された値を引き出し、cssを書き換えを繰り返す。
これにより各それぞれを別の画像として通信し、表示させるよりも速く表示させることができます。モバイル通信に優しい設計です。
値は、各spanのdata-setより受け取る<span aria-label="bar" class="reveal" data-num="0.07" data-code="p" style="width: 7%;"></span>
とすることでデータを外部から読み込むよりも速いし、データの節約にもなる。特に気にしない場合は、json形式にして処理すれば、データだけで、グラフを操作できる。
また、テーブルが伸びてもグラフも合わせれるように%で指定してあげる。
改良ポイント
もっと色々な用途に使えるように、改良の余地はあると思います。
一応、コード自体は短くしてみたけど、もっとスマートにできそう。
最後に改良ポイントとして、今回は説明もサンプルも出してないけど、data-code
にm
を挿入することで、反対に伸びる仕様となっている。