できるだけラクにグラフ化するJS

しゅん | ディレクター・デザイナー

これは先日、仕事の合間に衝動に駆られて勢いで作ったJavaScriptなんですが、実用を想定した仕様にするというお題を自分に課して組み直したものです。
デザイナーにとって扱いやすいツールをカタチにしていきたいと常々思っていたこともあり、せっかくなのでご紹介してみることにしました。

画像1


こんなHTMLがあるとして…

<dl class="my-chart1">
    <dt>アップルパイ</dt>
    <dd>67%</dd>
    <dt>エクレア</dt>
    <dd>56%</dd>
    <dt>ショートケーキ</dt>
    <dd>43%</dd>
    <dt>バウムクーヘン</dt>
    <dd>32%</dd>
    <dt>ワッフル</dt>
    <dd>21%</dd>
</dl>


こんな感じでJSのfunctionを呼び出すだけでOKです。

myChart1("my-chart1");


●フォントサイズに合わせて、それなりにバランス調整してくれます。
●もちろんレスポンシブ。
●色替えできます。
●Edge、IE11でも動きます。

全画面で見る場合はこちらへどうぞ。


使ってみたいという奇特な方へ

どこでもはまるようなデザインでもないので需要のほどは不明ですが、商用・非商用問わずご自由に使ってもらって構いません。
できる限りのチェックはしておりますが、気づいてない不具合が残ってる可能性はあります。使用により生じた一切の損害について理由の如何にかかわらず責任は負いかねます。ご了承ください。


使い方

本体のJSファイルを使いたいHTMLに読み込ませます。位置はどこでもいいです。

<script src="chart01.js"></script>


function「myChart1()」を呼び出すコードを入れてください。場所は普通に<body>タグ終了間際でOKです。外部JSファイルに記述しても構いません。
ただし<head>タグ内で呼び出しは避けてください。空振りします。

<dl class="my-chart1">
    <dt>アップルパイ</dt>
    <dd>67%</dd>
    <dt>エクレア</dt>
    <dd>56%</dd>
...
</dl>

...
<script>
    myChart1("my-chart1");
</script>
</body>

引数にはグラフ化したい要素のクラス名を指定します。
上記の例なら要素は<dl>、クラス名は「my-chart1」になります。セレクタ形式ではないので頭にピリオド「.」は不要です。
これだけでとりあえず動きます。


カラーの指定

デフォルトではラベルのテキストは白（#ffffff）、帯部分は記事の冒頭に載せたキャプチャの5カラーになります（6行以上あればその5カラーの繰り返し）。

任意のカラーに変えたい場合は引数でクラス名のあとにラベル文字カラー・帯カラーの順に指定します。16進でもRGBでもOK。ただしアルファ付き（#ffffff00・rgba(255, 255, 0, 0)など）は指定できません。

▼ myChart1("クラス名", "ラベルカラー", "帯カラー")

myChart1("my-chart1", "#000000", "#dbbe7c");

▼ RGB指定もできます。混在もOK。

myChart1("my-chart1", "rgb(0, 0, 0)", "#dbbe7c");

画像2


各行それぞれに異なったカラーも指定可です。カラーはスペースまたはカンマで区切って並べてください。

▼ myChart1("クラス名", "ラベルカラー1行目 2行目...", "帯カラー1行目 2行目...")

myChart1("my-chart1", "#ffffff #ffffff #ffffff #000000 #000000", "#112f91 #1b7fbd #00c3c1 #ffba0a #fed926");

myChart1("my-chart1", "#ffffff, #ffffff, #ffffff, #000000, #000000", "#112f91, #1b7fbd, #00c3c1, #ffba0a, #fed926");

画像7


交互にカラー繰り返しもできます。
行数よりも少ない指定の場合に繰り返しになります。

▼ 2行ごとに繰り返す場合なら…
myChart1("クラス名", "ラベルカラー奇数行 偶数行", "帯カラー奇数行 偶数行")

myChart1("my-chart1", "#000000 #ffffff", "#ff8888 #660000");

画像4


サイズは自動調整です

帯の太さなどは、グラフにするHTML要素に指定または継承されているCSSのフォントサイズが基準になります。フォントサイズを変えれば、帯の太さもそれに合わせて勝手に変わります。

.my-chart1{
    font-size: 1.5rem;
}
...

<dl class="my-chart1">
    <dt>アップルパイ</dt>
    <dd>67%</dd>
...

画像5

全体の幅は適用されているCSSに従います。レイアウトは自動で整えます。レスポンシブ対応する必要もないです。

画像6


グラフ化させるタグはなんでもいい

サンプルでは<dl>を使っていますが、
　1. 親ブロックの中に子要素が偶数個ある
　2. 子要素の偶数番目のテキストに数字が入っている
この条件を満たせば、特殊なものでない限りタグはなんでもOKです。<ul>と<li>でも、<p>と<span>でも、<div>だけの入れ子でも動きます。

2.については、数字さえ入っていれば単位が頭でも後ろでも2バイト文字でもOK。カンマ打っても構いません。
ただし、小数点があれば小数としてグラフ描画の計算をします。

<ul class="my-chart1">
    <li>アップルパイ</li>
    <li>67%</li>
...
</ul>


<p class="my-chart1">
    <span>エクレア</span>
    <span>¥220</span>
...
</p>


<div class="my-chart1">
    <div>超特大ホールケーキ</div>
    <div>13,200円</div>
...
</div>


CSS

余白やボーダー・背景色・幅など、よほど特殊なものでない限り適用OKです。Webフォントなんかも使えます（ただしモノによっては崩れるかも）。

.my-chart1{
    width: 80%;
    padding: 10px;
    border: 5px solid #770000;
    border-radius: 10px;
    background-color: #ffefbc;
    font-family: futura-pt, sans-serif;
}
...
<dl class="my-chart1">
    <dt>Apple Pie</dt>
    <dd>67%</dd>
...

画像7


ライブラリ依存しません

JQueryはもちろん、他に必要なライブラリはありません。単独で動きます。


他ライブラリとのバッティング

できるだけページ内で同時に使用している他のライブラリやCSSの邪魔はしないよう作ってあります。
逆にリセットCSSなどの影響もほぼ受けません。

ただし、当たり前ですがこれらを100%保証することはできません。JSやCSSの書き方・組み合わせによっては何でも起こり得ますので。


Edge・IE11を見捨てない

仕事じゃないからこの出来のわる…いや、個性の強い子たちは見捨てても良かったんですけどね。おかげで結構な時間を費やしたし、ドロップシャドウもあきらめたので。
ですが実用レベル想定となると、現状では彼らを無視できません。
というわけで、Edge・IE11でも動きます。
もちろんその他のモダンブラウザなら基本問題ありません。


最後に

僕はJSのエキスパートではないので泥臭い組み方してますし手練から見ればツッコミどころ満載でしょうが、可能な限り実用に耐えるようにはしたつもりです。

実用レベルという基準で調整すると、グラフってかなり面倒というか想像以上に奥が深かったです。おかげで得たものも多くありました。

土台の仕組みは出来上がったので、デザイン替えでグラフのバリエーションを増やせるかなと思っています。トンマナ選ばないシンプルな方が需要はありそうですが。

ただ凝ったものを作りたくなる性分なので…実際、すでにもうひとつヘンテコなのを進めておりまして、完成したらそれもお披露目します。