できるだけラクにグラフ化するJS ver.2
先日公開した「できるだけラクにグラフ化するJS」の第2弾がほぼ完成間近になったころ、ふとあることが頭をよぎりました。
「カラーはCSSで変えられるようにした方が良いのでは…？」
つまり、
functionの引数でしか指定できない
→独自仕様なので使い方を把握しないといけない
CSSで指定できる
→どのプロパティに設定するか把握できれば使える
と思ったわけです。
見た目に関する部分はなるべくCSSで変えるのが筋という気もしますし。
そこで第2弾をCSS指定方式に直す前に、第1弾をテストがてらバージョンアップしてみました。
ついでに見えない部分の改善も行いましたが、基本的な使い方や見た目は変わってません。なので本記事で触れるのは仕様変更部分だけにとどめます。その他、組み込み方や動作環境などについては前記事をご覧ください。
ver.2のファイルはこちらです。
変更した箇所
・ラベルテキストのカラー指定方法
・帯および数値テキストのカラー指定方法
ラベルテキストのカラー指定方法
奇数番目の子要素に「color」で指定してください。
セレクタは何でもいいです。クラス名付けての指定など、お好みで。
.my-chart1 > dt{
color: #ffffff;
}
...
<dl class="my-chart1">
<dt>アップルパイ</dt>
<dd>67%</dd>
<dt>エクレア</dt>
<dd>56%</dd>
...
</dl>
帯および数値テキストのカラー指定方法
偶数番目の子要素に「color」で指定してください。
.my-chart1 > dt{
color: #000000;
}
.my-chart1 > dd{
color: #dbbe7c;
}
...
<dl class="my-chart1">
<dt>アップルパイ</dt>
<dd>67%</dd>
<dt>エクレア</dt>
<dd>56%</dd>
...
</dl>
もちろん個別指定もできます。
.my-chart1 > dt{
color: #000000;
}
.my-chart1 > *:nth-child(2){
color: #eda14d;
}
.my-chart1 > *:nth-child(4){
color: #c5585d;
}
.my-chart1 > *:nth-child(6){
color: #964763;
}
.my-chart1 > *:nth-child(8){
color: #497496;
}
.my-chart1 > *:nth-child(10){
color: #79bfe5;
}
...
<dl class="my-chart1">
<dt>アップルパイ</dt>
<dd>67%</dd>
<dt>エクレア</dt>
<dd>56%</dd>
...
</dl>
使う引数は1つだけ
functionの引数で指定できるのはグラフ化したい要素のクラス名のみになります。
myChart1("my-chart1");
第2弾
ということでグラフ化JSの第2弾もほとんど完成しているのですが、こちらも極力CSS指定でコントロール出来るよう変更中です。
仕事の合間に気晴らし程度のつもりでやってるのに、凝り出したら止まらない性分なんで次々直したいところが出てきてしまうんですよね…他にやりたいことが出来なくなるんで、ほどほどで切り上げたいですが。
第2弾はネタとしては面白いと思うので、なるべく早く終わらせてnoteで公開したいと思います。