Excelのカラースケール風にHTMLのtableを見やすくするjQueryプラグインを作ってみた
今日は、HTMLページでデータ表を「理解しやすく」してくれるjQueryプラグインを作ったので紹介します。先週「こんなのあったんだ」と伝えたExcelのカラースケールやデータバーのような機能をHTMLで手軽に実現するものです。
企業サイトで調査データを公開するとき、解析データや統計データをシステムから動的に表示するときなど、これを使うと手軽にデータを読みやすくでき、データ差し替えの際にもHTMLを変更する必要はありません。
table関連のjQueryプラグインは多数あるのですが、ソートやフィルタをするものばかりで、「データを読みやすくする」ものは見当たらなかったので、先日の「Excel 2007の条件書式テンプレートすごい!（今さらですが）」の感動そのままに作ってみました。
HTMLのtable要素でExcelのカラースケール風の表示を実現するjQuery Table ColorScaleプラグイン
使い方は簡単。
jQuery Table ColorScaleをダウンロードする。
jQuery Table ColorScaleをダウンロードする
download jQuery Table ColorScaleダウンロードしたファイルを展開し、中にある
jquery.table_colorscale.jsを自分のWebサイトのサーバーに配置する。tableがあるHTMLで、サーバーに配置した
jquery.table_colorscale.jsを読み込む。<script src="jquery.table_colorscale.js"></script>※jquery.table_colorscale.jsをアップロードした場所を指す正しいURLを指定してください。読みやすくしたい
table要素の列や行を指定して、jQueryのメソッドとしてtableColorScale()を実行する。たとえば、次のようにすると、「
data」というクラス名の付けられたtable要素の各行の3列目のセルに対してカラースケールを設定できます。$(document).ready(function(){ $('table.data tr > :nth-child(3)').tableColorScale(); });1列目を指定したい場合は、$('table.data tr > :nth-child(1)')
2列目を指定したい場合は、$('table.data tr > :nth-child(2)')
3列目を指定したい場合は、$('table.data tr > :nth-child(3)')
のように、「:nth-child()」に列番号を入れて指定します。列ではなく行で指定したい場合は次のようにします。
$('table tbody > :nth-child(4) td').tableColorScale()上記以外の方法でも、jQueryオブジェクトを指定するセレクタを使って対象を指定できます。
複数の列（や行）にカラースケールを適用する場合、それぞれのデータ系列を指定して、それぞれ
tableColorScale()を実行します。table要素にクラス名やID名を付けておくと、この指定がやりやすくなります。
また、表示パフォーマンスへの影響を避けるために、
tableColorScale()の処理は$(document).ready()内で実行することを推奨します。
jQuery Table ColorScaleプラグインで使えるオプション
jQuery Table ColorScaleには、いくつかのオプションが用意されていて、.tableColorScale()メソッドの引数として指定することで動作を調整できます。
typeオプションとtypeOptオプション
どのような条件で表示をどう変えるかを指定するには、typeオプションを使います。一部のtypeオプション指定では、さらにtypeOptオプションで細かく動作を変えられます。
いずれのオプションも、指定されたjQueryオブジェクト全体を1つの値集合として扱い、各オブジェクトの数値が全体のなかでどの位置にあるかによって表示を変えるものです。
typeオプションもtyoeOptオプションも文字列で指定します。利用できる値は次のとおりです。
percentile（パーセンタイル）
（デフォルトの動作）
全体のなかで上から何パーセントの位置にあるかによって、セルの背景色を変えて読みやすくします。現在は25%刻みの4段階で表示が切り替わります。
使用例と表示例
$('table tr > :nth-child(3)').tableColorScale({type: 'percentile'});素のHTML表ページ 訪問数 新規訪問の割合 /page/16277 68,454 48.62% /page/12222 63,504 59.93% /page/16278 59,660 18.06% /page/15155 53,860 74.31% /page/14836 47,342 71.78% /page/5631 28,852 68.46% /page/7423 26,215 91.81% /page/12240 25,688 59.73% /page/12095 24,796 67.55% /page/16569 22,316 47.11% → → → → → → → → → → → パーセンタイルのカラースケールを適用ページ 訪問数 新規訪問の割合 /page/16277 68,454 48.62% /page/12222 63,504 59.93% /page/16278 59,660 18.06% /page/15155 53,860 74.31% /page/14836 47,342 71.78% /page/5631 28,852 68.46% /page/7423 26,215 91.81% /page/12240 25,688 59.73% /page/12095 24,796 67.55% /page/16569 22,316 47.11% sigma（シグマ）
全体の平均値から上下に何シグマの範囲にあるかによって、セルの背景色を変えて読みやすくします。現在は平均から±1シグマ未満、±2シグマ未満、±2シグマ以上の6段階で表示が切り替わります。
使用例と表示例
$('table tr > :nth-child(3)').tableColorScale({type: 'sigma'});素のHTML表ページ 訪問数 新規訪問の割合 /page/16277 68,454 48.62% /page/12222 63,504 59.93% /page/16278 59,660 18.06% /page/15155 53,860 74.31% /page/14836 47,342 71.78% /page/5631 28,852 68.46% /page/7423 26,215 91.81% /page/12240 25,688 59.73% /page/12095 24,796 67.55% /page/16569 22,316 47.11% → → → → → → → → → → → シグマのカラースケールを適用ページ 訪問数 新規訪問の割合 /page/16277 68,454 48.62% /page/12222 63,504 59.93% /page/16278 59,660 18.06% /page/15155 53,860 74.31% /page/14836 47,342 71.78% /page/5631 28,852 68.46% /page/7423 26,215 91.81% /page/12240 25,688 59.73% /page/12095 24,796 67.55% /page/16569 22,316 47.11% topn（上位／下位のn項目）
上位（または下位）のn項目だけ、セルの背景色を変えて強調します。
使用例と表示例
デフォルトでは上位10項目が強調されます。
$('table tr > :nth-child(3)').tableColorScale({type: 'topn'});素のHTML表ページ 訪問数 新規訪問の割合 /page/16277 68,454 48.62% /page/12222 63,504 59.93% /page/16278 59,660 18.06% /page/15155 53,860 74.31% /page/14836 47,342 71.78% /page/5631 28,852 68.46% /page/7423 26,215 91.81% /page/12240 25,688 59.73% /page/12095 24,796 67.55% /page/16569 22,316 47.11% /page/16053 21,043 55.84% /page/14997 20,836 39.98% /page/8140 19,723 84.61% /page/13203 19,242 78.18% → → → → → → → → → → → → → → → 上位10項目の強調を適用ページ 訪問数 新規訪問の割合 /page/16277 68,454 48.62% /page/12222 63,504 59.93% /page/16278 59,660 18.06% /page/15155 53,860 74.31% /page/14836 47,342 71.78% /page/5631 28,852 68.46% /page/7423 26,215 91.81% /page/12240 25,688 59.73% /page/12095 24,796 67.55% /page/16569 22,316 47.11% /page/16053 21,043 55.84% /page/14997 20,836 39.98% /page/8140 19,723 84.61% /page/13203 19,242 78.18% 選ぶ項目数を変えたり、下位を選んだりするには、
typeOptオプションを使います。上位の項目から任意の数を選ぶときはtypeOptオプションに正の整数を指定します。以下は上位5項目を選ぶ場合の指定の例です。
$('table tr > :nth-child(3)').tableColorScale({type: 'topn', typeOpt: 5});素のHTML表ページ 訪問数 新規訪問の割合 /page/16277 68,454 48.62% /page/12222 63,504 59.93% /page/16278 59,660 18.06% /page/15155 53,860 74.31% /page/14836 47,342 71.78% /page/5631 28,852 68.46% /page/7423 26,215 91.81% /page/12240 25,688 59.73% /page/12095 24,796 67.55% /page/16569 22,316 47.11% → → → → → → → → → → → 上位5項目の強調を適用ページ 訪問数 新規訪問の割合 /page/16277 68,454 48.62% /page/12222 63,504 59.93% /page/16278 59,660 18.06% /page/15155 53,860 74.31% /page/14836 47,342 71.78% /page/5631 28,852 68.46% /page/7423 26,215 91.81% /page/12240 25,688 59.73% /page/12095 24,796 67.55% /page/16569 22,316 47.11% 下位の項目を選ぶときはtypeOptオプションに負の整数を指定します。以下は下位3項目を選ぶ場合の指定の例です。
$('table tr > :nth-child(3)').tableColorScale({type: 'topn', typeOpt: -3})素のHTML表ページ 訪問数 新規訪問の割合 /page/16277 68,454 48.62% /page/12222 63,504 59.93% /page/16278 59,660 18.06% /page/15155 53,860 74.31% /page/14836 47,342 71.78% /page/5631 28,852 68.46% /page/7423 26,215 91.81% /page/12240 25,688 59.73% /page/12095 24,796 67.55% /page/16569 22,316 47.11% → → → → → → → → → → → 下位3項目の強調を適用ページ 訪問数 新規訪問の割合 /page/16277 68,454 48.62% /page/12222 63,504 59.93% /page/16278 59,660 18.06% /page/15155 53,860 74.31% /page/14836 47,342 71.78% /page/5631 28,852 68.46% /page/7423 26,215 91.81% /page/12240 25,688 59.73% /page/12095 24,796 67.55% /page/16569 22,316 47.11% 上位と下位のそれぞれを指定するには、上位を選ぶ
tableColorScale()メソッドと下位を選ぶtableColorScale()メソッドをチェインさせます。$('table tr > :nth-child(3)') .tableColorScale({type: 'topn', typeOpt: 4}) .tableColorScale({type: 'topn', typeOpt: -2});素のHTML表ページ 訪問数 新規訪問の割合 /page/16277 68,454 48.62% /page/12222 63,504 59.93% /page/16278 59,660 18.06% /page/15155 53,860 74.31% /page/14836 47,342 71.78% /page/5631 28,852 68.46% /page/7423 26,215 91.81% /page/12240 25,688 59.73% /page/12095 24,796 67.55% /page/16569 22,316 47.11% → → → → → → → → → → → 上位4項目と下位2項目の強調を適用ページ 訪問数 新規訪問の割合 /page/16277 68,454 48.62% /page/12222 63,504 59.93% /page/16278 59,660 18.06% /page/15155 53,860 74.31% /page/14836 47,342 71.78% /page/5631 28,852 68.46% /page/7423 26,215 91.81% /page/12240 25,688 59.73% /page/12095 24,796 67.55% /page/16569 22,316 47.11% databar（データバー）
全体のなかで上から何パーセントの位置にあるかによって、セルの背景にデータバーを表示します。
使用例と表示例
$('table tr > :nth-child(3)').tableColorScale({type: 'databar'});素のHTML表ページ 訪問数 新規訪問の割合 /page/16277 68,454 48.62% /page/12222 63,504 59.93% /page/16278 59,660 18.06% /page/15155 53,860 74.31% /page/14836 47,342 71.78% /page/5631 28,852 68.46% /page/7423 26,215 91.81% /page/12240 25,688 59.73% /page/12095 24,796 67.55% /page/16569 22,316 47.11% → → → → → → → → → → → データバーを適用ページ 訪問数 新規訪問の割合 /page/16277 68,454 48.62% /page/12222 63,504 59.93% /page/16278 59,660 18.06% /page/15155 53,860 74.31% /page/14836 47,342 71.78% /page/5631 28,852 68.46% /page/7423 26,215 91.81% /page/12240 25,688 59.73% /page/12095 24,796 67.55% /page/16569 22,316 47.11% ※現在はtdに設定されているpaddingの内側にデータバーを表示します。none
色やデータバーに関しては何もしません。
標準で指定されたオブジェクト内の数値セルの文字位置を右揃えにするので、その機能だけを利用したい場合に使います。
使用例と表示例
$('table tr > :nth-child(3)').tableColorScale({type: 'none'});素のHTML表ページ 訪問数 新規訪問の割合 /page/16277 68,454 48.62% /page/12222 63,504 59.93% /page/16278 59,660 18.06% /page/15155 53,860 74.31% /page/14836 47,342 71.78% /page/5631 28,852 68.46% /page/7423 26,215 91.81% /page/12240 25,688 59.73% /page/12095 24,796 67.55% /page/16569 22,316 47.11% → → → → → → → → → → → typeオプションにnoneを適用ページ 訪問数 新規訪問の割合 /page/16277 68,454 48.62% /page/12222 63,504 59.93% /page/16278 59,660 18.06% /page/15155 53,860 74.31% /page/14836 47,342 71.78% /page/5631 28,852 68.46% /page/7423 26,215 91.81% /page/12240 25,688 59.73% /page/12095 24,796 67.55% /page/16569 22,316 47.11%
cssオプション
デフォルトではそれぞれのtypeに応じた配色で色づけなどがされますが、その配色をcssオプションで指定できます。
cssオプションでスタイルを指定する場合、typeごとに定義された色区分の文字列をキーに、CSS指定を値にして並べたオブジェクト形式で指定します。
CSS指定は、jQueryのcssメソッドの引数と同じ形式のオブジェクトとして指定します。
デフォルトのtype値それぞれが使っているキー名とCSS指定は次のとおりです。
| type値とキー名 | 意味 | デフォルト値 |
|---|---|---|
| percentile | ||
| 75% | 全体の75%以上 | {backgroundColor: 'rgba(0,255,0,0.4)'} |
| 50% | 全体の50%以上75%未満 | {backgroundColor: 'rgba(208,255,0,0.4)'} |
| 25% | 全体の25%以上50%未満 | {backgroundColor: 'rgba(255,128,0,0.4)'} |
| 0% | 全体の25%未満 | {backgroundColor: 'rgba(255,0,0,0.4)'} |
| sigma | ||
| 2sigma+ | 平均＋2シグマ以上 | {backgroundColor: 'rgba(0,255,0,0.4)'} |
| 1sigmaTo2sigma | 平均＋1シグマ以上、＋2シグマ未満 | {backgroundColor: 'rgba(128,255,0,0.4)'} |
| avgTo1sigma | 平均以上＋1シグマ未満 | {backgroundColor: 'rgba(204,255,0,0.4)'} |
| avgTo-1sigma | 平均未満＋1シグマ以上 | {backgroundColor: 'rgba(255,204,0,0.4)'} |
| -1sigmaTo-2sigma | 平均－1シグマ未満、－2シグマ以上 | {backgroundColor: 'rgba(255,128,0,0.4)'} |
| -2sigma- | 平均－2シグマ未満 | {backgroundColor: 'rgba(255,0,0,0.4)'} |
| topn | ||
| topnTop | 上位項目 | {backgroundColor: 'rgba(0,255,0,0.4)'} |
| topnBottom | 下位項目 | {backgroundColor: 'rgba(255,0,0,0.4)'} |
| databar | ||
| databar | データバー | {backgroundColor: 'rgba(128,201,255,0.4)'} |
使用例と表示例
パーセンタイル値のタイプで全体の75%以上に位置する数値のセルの書式を変えるには次のようにします（例では背景色に黄色、太字で大きい文字に指定）。
$('table tr > :nth-child(3)').tableColorScale({
'type': 'percentile',
'css': {
'75%': {
'backgroundColor': 'rgba(255,255,0,1)',
'fontWeight': 'bold',
'fontSize': '1.25em'
}
}
});| ページ | 訪問数 | 新規訪問の割合 |
|---|---|---|
| /page/16277 | 68,454 | 48.62% |
| /page/12222 | 63,504 | 59.93% |
| /page/16278 | 59,660 | 18.06% |
| /page/15155 | 53,860 | 74.31% |
| /page/14836 | 47,342 | 71.78% |
| /page/5631 | 28,852 | 68.46% |
| /page/7423 | 26,215 | 91.81% |
| /page/12240 | 25,688 | 59.73% |
| /page/12095 | 24,796 | 67.55% |
| /page/16569 | 22,316 | 47.11% |
| → |
| → |
| → |
| → |
| → |
| → |
| → |
| → |
| → |
| → |
| → |
| ページ | 訪問数 | 新規訪問の割合 |
|---|---|---|
| /page/16277 | 68,454 | 48.62% |
| /page/12222 | 63,504 | 59.93% |
| /page/16278 | 59,660 | 18.06% |
| /page/15155 | 53,860 | 74.31% |
| /page/14836 | 47,342 | 71.78% |
| /page/5631 | 28,852 | 68.46% |
| /page/7423 | 26,215 | 91.81% |
| /page/12240 | 25,688 | 59.73% |
| /page/12095 | 24,796 | 67.55% |
| /page/16569 | 22,316 | 47.11% |
次のようにすると、シグマのタイプで、平均より上下1シグマ内の背景色の色づけをナシにします（つまり、平均から1シグマ以上離れている値にだけ色が付く）。
個人的には、これが一番データを読みやすい指定ではないかと思っています。
$('table tr > :nth-child(3)').tableColorScale({
'type': 'sigma',
'css': {
'avgTo1sigma' : {},
'avgTo-1sigma' : {}
}
});| ページ | 訪問数 | 新規訪問の割合 |
|---|---|---|
| /page/16277 | 68,454 | 48.62% |
| /page/12222 | 63,504 | 59.93% |
| /page/16278 | 59,660 | 18.06% |
| /page/15155 | 53,860 | 74.31% |
| /page/14836 | 47,342 | 71.78% |
| /page/5631 | 28,852 | 68.46% |
| /page/7423 | 26,215 | 91.81% |
| /page/12240 | 25,688 | 59.73% |
| /page/12095 | 24,796 | 67.55% |
| /page/16569 | 22,316 | 47.11% |
| → |
| → |
| → |
| → |
| → |
| → |
| → |
| → |
| → |
| → |
| → |
| ページ | 訪問数 | 新規訪問の割合 |
|---|---|---|
| /page/16277 | 68,454 | 48.62% |
| /page/12222 | 63,504 | 59.93% |
| /page/16278 | 59,660 | 18.06% |
| /page/15155 | 53,860 | 74.31% |
| /page/14836 | 47,342 | 71.78% |
| /page/5631 | 28,852 | 68.46% |
| /page/7423 | 26,215 | 91.81% |
| /page/12240 | 25,688 | 59.73% |
| /page/12095 | 24,796 | 67.55% |
| /page/16569 | 22,316 | 47.11% |
データバーの色を変えるには次のようにします。
$('table tr > :nth-child(3)').tableColorScale({
'type': 'databar',
'css': {
'databar' : {'backgroundColor': 'rgba(255,0,0,0.4)'}
}
});| ページ | 訪問数 | 新規訪問の割合 |
|---|---|---|
| /page/16277 | 68,454 | 48.62% |
| /page/12222 | 63,504 | 59.93% |
| /page/16278 | 59,660 | 18.06% |
| /page/15155 | 53,860 | 74.31% |
| /page/14836 | 47,342 | 71.78% |
| /page/5631 | 28,852 | 68.46% |
| /page/7423 | 26,215 | 91.81% |
| /page/12240 | 25,688 | 59.73% |
| /page/12095 | 24,796 | 67.55% |
| /page/16569 | 22,316 | 47.11% |
| → |
| → |
| → |
| → |
| → |
| → |
| → |
| → |
| → |
| → |
| → |
| ページ | 訪問数 | 新規訪問の割合 |
|---|---|---|
| /page/16277 | 68,454 | 48.62% |
| /page/12222 | 63,504 | 59.93% |
| /page/16278 | 59,660 | 18.06% |
| /page/15155 | 53,860 | 74.31% |
| /page/14836 | 47,342 | 71.78% |
| /page/5631 | 28,852 | 68.46% |
| /page/7423 | 26,215 | 91.81% |
| /page/12240 | 25,688 | 59.73% |
| /page/12095 | 24,796 | 67.55% |
| /page/16569 | 22,316 | 47.11% |
numTextAlignオプション
このプラグインを実行した対象のセルの値が数値として扱える形式の場合、自動的にそのセルを右揃えにします。
この動作を変えたい場合は、numTextAlignオプションを使います。
numTextAlignオプションに「'left'」「'center'」「'right'」のいずれかを指定した場合は、その値でtext-alignスタイルが設定されます。
numTextAlignオプションに空文字「''」を指定すると、文字揃えの変更は行いません。
色分けなどのカスタム指定
デフォルトで用意されているパターン以外で色分けなどをしたい場合、typeオプションに関数形式でその処理を渡すことで、自由に制御できます。
typeオプションに関数を指定する場合の引数などに関しては、ソースコードをご覧ください。
安田 英久（やすだ・ひでひさ）
株式会社インプレス
Web担当者Forum 編集統括（初代編集長）
プログラミングやサーバー、データベースなどの技術系翻訳書や雑誌『インターネットマガジン』などの編集や出版営業を経て、Webサイト 「Web担当者Forum」初代編集長。ビジネスにおけるWebサイトの企画・構築・運用と、オンラインマーケティングの2軸をテーマにメディアを展開いる。現在は編集統括として媒体に携わる。
個人としては、技術とマーケティングの融合によるインターネットのビジネス活用の新しい姿と、ブログ/CGM時代におけるメディアのあるべき姿を模索し続けている。趣味は素人プログラミングと上方落語と南インドカレー。
必見！ Facebookいいね! 人気記事
最近（過去90日間）の記事で、Facebookの「いいね！」が多かった記事をお見逃し無く。
Facebookいいね!の多い記事
Twitterで言及の多い記事
はてなブックマーク人気記事
ソーシャルもやってます!