ままろぐ

旦那・長男と共にポケモンにはまっている
不器用ママfuruchanの記録です。
2016/10/14 (Fri) 
お仕事覚え書き01 CSSでグラフ描画
ブログ放置して幾年月…

ま、見ている人も居ないと思いますが。

ポケモン映画のレポートすら書いてませんからね。
面白かったですがそれはそれ、今回は仕事の覚え書きです。



先月、昔居た会社から仕事をいただきました。
詳細は言えませんが、ウェブデザインのお仕事です。
と言っても一般に公開するウェブサイトではないのですが…。


そこではじめにもらったお仕事は「出力されてくる数字をウェブ上でグラフ化すること」
となると当然こういう話になる訳で。


私「HTML5とかGoogleAPIとかは?」
旦那(担当です)「Googleとか、いつサービス終わるか分からない物を使う訳にはいかない場所だからやめて欲しい」
私「となると…CSS?棒グラフで良い?」
旦那「任せるよ。でも、折れ線グラフも欲しい。両方を一つのグラフ領域に入れられれば理想」
私「」


幸いなことに、CSSのみで折れ線グラフを描画する方法は以下のブログで説明されていました。
CSSだけで折れ線グラフを書く方法 - ふじこのプログラミング奮闘記

屋上屋を架すような事は避けますが、一点だけ。

具体的に、じゃ、このグラフを手持ちのデータにしたい時はどうするの?て所をお喋りします。

CSSを読み解くと分かると思いますが、折れ線グラフのドットは常に左側に描画されています。
次のデータへ行く線が上がるか下がるかで左下か左上か決まるんですね。

つまり、<span class="pi1 i10">は

・class="pi1"で前の数値より自分を11px増やす。(上昇ドットクラス、と勝手に命名します)
・<span class="i10">で次の数値が330px上に上昇する線を背景にする。(こちらは折れ線クラスにします)

この二つのクラスを使って折れ線グラフを描画していきます。
クラスを二つ同時に適応させる場合、間にスペースを入れてクラス名を書いていく方法を今回初めて知りました^^;

次の値が下降する時は<span class="pd11 d d4">と言うように書きます。
ドットクラスが「pi」ではなく「pd」になっていますね。
これは自身のデータが前の数字より下降したことを意味します。仮に下降ドットクラスと名付けます。
下降ドットクラスと折れ線クラスの間に下降宣言クラス「d」を入れてください。
これで描画されるドットの位置と、折れ線の向きが調整されます。


ちなみに件の折れ線グラフは一目盛り10%です。つまり11px上昇で10%UPということ。
+1%=+1pxで動かしているんですね。(軸で1px使っていることを頭に入れてね)
これを参考にクラスの数字をいじると自分の手持ちのデータが折れ線グラフになりますよ。


ここからは完璧蛇足なのですが、このグラフ、0から始まって居るのに
最初の値は3(つまりday1の値)から始まって居るんですよね。

これ、すっごく悩みました。仕組みを分かったつもりでも、出だしの値がリストに存在しないんです。
まあ、リストに格納する数値はぶっちゃけ自分ルールに変えて問題ないので、
day0の値0を入れれば問題解決なんですがw


これだけだと他ブログさんに蛇足をつけただけなので、
次のエントリーでこの折れ線グラフに棒グラフを付加し、更に小技をいくつか追記できたらと思います。
←戻る | 2016/10/14 (Fri)  17:36 | その他

 
Comment
 
No Comment yet.
 
 
Comment Form
 
 
 
 
TrackBack
 
No TrackBack yet.
 
 
TrackBack URL

http://www.gan.st/furu/blog/action.php?action=plugin&name=TrackBack&tb_id=2010