LoginSignup
2

More than 5 years have passed since last update.

Spanでグラフ作ってみた。

Posted at

まずはじめに、こんな事してみたい

スクリーンショット 2017-05-11 3.17.16.png
こーんな感じのグラフ作ってみたい。(※実際に完成したグラフの画像です)

考察

個人だけでやるなら、グラフに特化したプラグインとか導入すれば簡単なんだろうけど...自作でできないか、まずは考える。
(※外部ライブラリーは、jQueryのみ使用)

それでは、デザインより最良の構造化を考えてみる。

  1. なるべく画像は使い回す。
  2. 読み込みのスピードを重視する。(表示相手はモバイルが対象なので)
  3. メンテナンスが楽になるように考える。
  4. 外部ライブラリは極力避ける。
  5. テーブルは、リキッド対応にする。(FOXDIE...じゃない)
  6. 数値は、各個別に設定も可能なようにする。
  7. また、グラフは一方方向ではなく、逆方向へも伸びるように設計する。
  8. リキッドなので、グラフもそれに合わせて、可動域内で動けるようにする。
  9. バーの長さは、実際のデザインと変わらない長さにする。
  10. 面倒なことは、プログラムに任せる。(※本音)

■コードと解説

コード

index.js
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-codemを挿入することで、反対に伸びる仕様となっている。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2