初代編集長ブログ―安田英久

Excelのカラースケール風にHTMLのtableを見やすくするjQueryプラグインを作ってみた

Excelのカラースケールやデータバーのような機能をHTMLで手軽に実現するjQueryプラグインです
Web担のなかの人

今日は、HTMLページでデータ表を「理解しやすく」してくれるjQueryプラグインを作ったので紹介します。先週「こんなのあったんだ」と伝えたExcelのカラースケールやデータバーのような機能をHTMLで手軽に実現するものです。

企業サイトで調査データを公開するとき、解析データや統計データをシステムから動的に表示するときなど、これを使うと手軽にデータを読みやすくでき、データ差し替えの際にもHTMLを変更する必要はありません

table関連のjQueryプラグインは多数あるのですが、ソートやフィルタをするものばかりで、「データを読みやすくする」ものは見当たらなかったので、先日の「Excel 2007の条件書式テンプレートすごい!(今さらですが)」の感動そのままに作ってみました。

HTMLのtable要素でExcelのカラースケール風の表示を実現するjQuery Table ColorScaleプラグイン

使い方は簡単。

  1. jQuery Table ColorScaleをダウンロードする。

    jQuery Table ColorScaleをダウンロードする
    download jQuery Table ColorScale

  2. ダウンロードしたファイルを展開し、中にあるjquery.table_colorscale.jsを自分のWebサイトのサーバーに配置する。

  3. tableがあるHTMLで、サーバーに配置したjquery.table_colorscale.jsを読み込む。

    <script src="jquery.table_colorscale.js"></script>
    jquery.table_colorscale.jsをアップロードした場所を指す正しいURLを指定してください。
  4. 読みやすくしたい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/1627768,45448.62%
    /page/1222263,50459.93%
    /page/1627859,66018.06%
    /page/1515553,86074.31%
    /page/1483647,34271.78%
    /page/563128,85268.46%
    /page/742326,21591.81%
    /page/1224025,68859.73%
    /page/1209524,79667.55%
    /page/1656922,31647.11%
    パーセンタイルのカラースケールを適用
    ページ訪問数新規訪問の割合
    /page/1627768,45448.62%
    /page/1222263,50459.93%
    /page/1627859,66018.06%
    /page/1515553,86074.31%
    /page/1483647,34271.78%
    /page/563128,85268.46%
    /page/742326,21591.81%
    /page/1224025,68859.73%
    /page/1209524,79667.55%
    /page/1656922,31647.11%
  • sigma(シグマ)

    全体の平均値から上下に何シグマの範囲にあるかによって、セルの背景色を変えて読みやすくします。現在は平均から±1シグマ未満、±2シグマ未満、±2シグマ以上の6段階で表示が切り替わります。

    使用例と表示例

    $('table tr > :nth-child(3)').tableColorScale({type: 'sigma'});
    素のHTML表
    ページ訪問数新規訪問の割合
    /page/1627768,45448.62%
    /page/1222263,50459.93%
    /page/1627859,66018.06%
    /page/1515553,86074.31%
    /page/1483647,34271.78%
    /page/563128,85268.46%
    /page/742326,21591.81%
    /page/1224025,68859.73%
    /page/1209524,79667.55%
    /page/1656922,31647.11%
    シグマのカラースケールを適用
    ページ訪問数新規訪問の割合
    /page/1627768,45448.62%
    /page/1222263,50459.93%
    /page/1627859,66018.06%
    /page/1515553,86074.31%
    /page/1483647,34271.78%
    /page/563128,85268.46%
    /page/742326,21591.81%
    /page/1224025,68859.73%
    /page/1209524,79667.55%
    /page/1656922,31647.11%
  • topn(上位/下位のn項目)

    上位(または下位)のn項目だけ、セルの背景色を変えて強調します。

    使用例と表示例

    デフォルトでは上位10項目が強調されます。

    $('table tr > :nth-child(3)').tableColorScale({type: 'topn'});
    素のHTML表
    ページ訪問数新規訪問の割合
    /page/1627768,45448.62%
    /page/1222263,50459.93%
    /page/1627859,66018.06%
    /page/1515553,86074.31%
    /page/1483647,34271.78%
    /page/563128,85268.46%
    /page/742326,21591.81%
    /page/1224025,68859.73%
    /page/1209524,79667.55%
    /page/1656922,31647.11%
    /page/1605321,04355.84%
    /page/1499720,83639.98%
    /page/814019,72384.61%
    /page/1320319,24278.18%
    上位10項目の強調を適用
    ページ訪問数新規訪問の割合
    /page/1627768,45448.62%
    /page/1222263,50459.93%
    /page/1627859,66018.06%
    /page/1515553,86074.31%
    /page/1483647,34271.78%
    /page/563128,85268.46%
    /page/742326,21591.81%
    /page/1224025,68859.73%
    /page/1209524,79667.55%
    /page/1656922,31647.11%
    /page/1605321,04355.84%
    /page/1499720,83639.98%
    /page/814019,72384.61%
    /page/1320319,24278.18%

    選ぶ項目数を変えたり、下位を選んだりするには、typeOptオプションを使います。

    上位の項目から任意の数を選ぶときはtypeOptオプションに正の整数を指定します。以下は上位5項目を選ぶ場合の指定の例です。

    $('table tr > :nth-child(3)').tableColorScale({type: 'topn', typeOpt: 5});
    素のHTML表
    ページ訪問数新規訪問の割合
    /page/1627768,45448.62%
    /page/1222263,50459.93%
    /page/1627859,66018.06%
    /page/1515553,86074.31%
    /page/1483647,34271.78%
    /page/563128,85268.46%
    /page/742326,21591.81%
    /page/1224025,68859.73%
    /page/1209524,79667.55%
    /page/1656922,31647.11%
    上位5項目の強調を適用
    ページ訪問数新規訪問の割合
    /page/1627768,45448.62%
    /page/1222263,50459.93%
    /page/1627859,66018.06%
    /page/1515553,86074.31%
    /page/1483647,34271.78%
    /page/563128,85268.46%
    /page/742326,21591.81%
    /page/1224025,68859.73%
    /page/1209524,79667.55%
    /page/1656922,31647.11%

    下位の項目を選ぶときはtypeOptオプションに負の整数を指定します。以下は下位3項目を選ぶ場合の指定の例です。

    $('table tr > :nth-child(3)').tableColorScale({type: 'topn', typeOpt: -3})
    素のHTML表
    ページ訪問数新規訪問の割合
    /page/1627768,45448.62%
    /page/1222263,50459.93%
    /page/1627859,66018.06%
    /page/1515553,86074.31%
    /page/1483647,34271.78%
    /page/563128,85268.46%
    /page/742326,21591.81%
    /page/1224025,68859.73%
    /page/1209524,79667.55%
    /page/1656922,31647.11%
    下位3項目の強調を適用
    ページ訪問数新規訪問の割合
    /page/1627768,45448.62%
    /page/1222263,50459.93%
    /page/1627859,66018.06%
    /page/1515553,86074.31%
    /page/1483647,34271.78%
    /page/563128,85268.46%
    /page/742326,21591.81%
    /page/1224025,68859.73%
    /page/1209524,79667.55%
    /page/1656922,31647.11%

    上位と下位のそれぞれを指定するには、上位を選ぶtableColorScale()メソッドと下位を選ぶtableColorScale()メソッドをチェインさせます。

    $('table tr > :nth-child(3)')
      .tableColorScale({type: 'topn', typeOpt: 4})
      .tableColorScale({type: 'topn', typeOpt: -2});
    素のHTML表
    ページ訪問数新規訪問の割合
    /page/1627768,45448.62%
    /page/1222263,50459.93%
    /page/1627859,66018.06%
    /page/1515553,86074.31%
    /page/1483647,34271.78%
    /page/563128,85268.46%
    /page/742326,21591.81%
    /page/1224025,68859.73%
    /page/1209524,79667.55%
    /page/1656922,31647.11%
    上位4項目と下位2項目の強調を適用
    ページ訪問数新規訪問の割合
    /page/1627768,45448.62%
    /page/1222263,50459.93%
    /page/1627859,66018.06%
    /page/1515553,86074.31%
    /page/1483647,34271.78%
    /page/563128,85268.46%
    /page/742326,21591.81%
    /page/1224025,68859.73%
    /page/1209524,79667.55%
    /page/1656922,31647.11%
  • databar(データバー)

    全体のなかで上から何パーセントの位置にあるかによって、セルの背景にデータバーを表示します。

    使用例と表示例

    $('table tr > :nth-child(3)').tableColorScale({type: 'databar'});
    素のHTML表
    ページ訪問数新規訪問の割合
    /page/1627768,45448.62%
    /page/1222263,50459.93%
    /page/1627859,66018.06%
    /page/1515553,86074.31%
    /page/1483647,34271.78%
    /page/563128,85268.46%
    /page/742326,21591.81%
    /page/1224025,68859.73%
    /page/1209524,79667.55%
    /page/1656922,31647.11%
    データバーを適用
    ページ訪問数新規訪問の割合
    /page/1627768,45448.62%
    /page/1222263,50459.93%
    /page/1627859,66018.06%
    /page/1515553,86074.31%
    /page/1483647,34271.78%
    /page/563128,85268.46%
    /page/742326,21591.81%
    /page/1224025,68859.73%
    /page/1209524,79667.55%
    /page/1656922,31647.11%
    ※現在はtdに設定されているpaddingの内側にデータバーを表示します。
  • none

    色やデータバーに関しては何もしません。

    標準で指定されたオブジェクト内の数値セルの文字位置を右揃えにするので、その機能だけを利用したい場合に使います。

    使用例と表示例

    $('table tr > :nth-child(3)').tableColorScale({type: 'none'});
    素のHTML表
    ページ訪問数新規訪問の割合
    /page/1627768,45448.62%
    /page/1222263,50459.93%
    /page/1627859,66018.06%
    /page/1515553,86074.31%
    /page/1483647,34271.78%
    /page/563128,85268.46%
    /page/742326,21591.81%
    /page/1224025,68859.73%
    /page/1209524,79667.55%
    /page/1656922,31647.11%
    typeオプションにnoneを適用
    ページ訪問数新規訪問の割合
    /page/1627768,45448.62%
    /page/1222263,50459.93%
    /page/1627859,66018.06%
    /page/1515553,86074.31%
    /page/1483647,34271.78%
    /page/563128,85268.46%
    /page/742326,21591.81%
    /page/1224025,68859.73%
    /page/1209524,79667.55%
    /page/1656922,31647.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/1627768,45448.62%
/page/1222263,50459.93%
/page/1627859,66018.06%
/page/1515553,86074.31%
/page/1483647,34271.78%
/page/563128,85268.46%
/page/742326,21591.81%
/page/1224025,68859.73%
/page/1209524,79667.55%
/page/1656922,31647.11%
75%以上だけ別のCSSを適用
ページ訪問数新規訪問の割合
/page/1627768,45448.62%
/page/1222263,50459.93%
/page/1627859,66018.06%
/page/1515553,86074.31%
/page/1483647,34271.78%
/page/563128,85268.46%
/page/742326,21591.81%
/page/1224025,68859.73%
/page/1209524,79667.55%
/page/1656922,31647.11%

次のようにすると、シグマのタイプで、平均より上下1シグマ内の背景色の色づけをナシにします(つまり、平均から1シグマ以上離れている値にだけ色が付く)。

個人的には、これが一番データを読みやすい指定ではないかと思っています。

$('table tr > :nth-child(3)').tableColorScale({
  'type': 'sigma',
  'css': {
    'avgTo1sigma' : {},
    'avgTo-1sigma' : {}
  }
});
標準のシグマ
ページ訪問数新規訪問の割合
/page/1627768,45448.62%
/page/1222263,50459.93%
/page/1627859,66018.06%
/page/1515553,86074.31%
/page/1483647,34271.78%
/page/563128,85268.46%
/page/742326,21591.81%
/page/1224025,68859.73%
/page/1209524,79667.55%
/page/1656922,31647.11%
±1シグマ以内は強調なし
ページ訪問数新規訪問の割合
/page/1627768,45448.62%
/page/1222263,50459.93%
/page/1627859,66018.06%
/page/1515553,86074.31%
/page/1483647,34271.78%
/page/563128,85268.46%
/page/742326,21591.81%
/page/1224025,68859.73%
/page/1209524,79667.55%
/page/1656922,31647.11%

データバーの色を変えるには次のようにします。

$('table tr > :nth-child(3)').tableColorScale({
  'type': 'databar',
  'css': {
    'databar' : {'backgroundColor': 'rgba(255,0,0,0.4)'}
  }
});
標準のデータバー
ページ訪問数新規訪問の割合
/page/1627768,45448.62%
/page/1222263,50459.93%
/page/1627859,66018.06%
/page/1515553,86074.31%
/page/1483647,34271.78%
/page/563128,85268.46%
/page/742326,21591.81%
/page/1224025,68859.73%
/page/1209524,79667.55%
/page/1656922,31647.11%
色を変えたデータバー
ページ訪問数新規訪問の割合
/page/1627768,45448.62%
/page/1222263,50459.93%
/page/1627859,66018.06%
/page/1515553,86074.31%
/page/1483647,34271.78%
/page/563128,85268.46%
/page/742326,21591.81%
/page/1224025,68859.73%
/page/1209524,79667.55%
/page/1656922,31647.11%

numTextAlignオプション

このプラグインを実行した対象のセルの値が数値として扱える形式の場合、自動的にそのセルを右揃えにします。

この動作を変えたい場合は、numTextAlignオプションを使います。

numTextAlignオプションに「'left'」「'center'」「'right'」のいずれかを指定した場合は、その値でtext-alignスタイルが設定されます。

numTextAlignオプションに空文字「''」を指定すると、文字揃えの変更は行いません。

色分けなどのカスタム指定

デフォルトで用意されているパターン以外で色分けなどをしたい場合、typeオプションに関数形式でその処理を渡すことで、自由に制御できます。

typeオプションに関数を指定する場合の引数などに関しては、ソースコードをご覧ください。

この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

Python
「Python」(パイソン)は、プログラミング言語の1つ。プログラマのグイド・ヴ ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]