Tabulator tips

第22回 折れ線グラフ(sparklines)

2020.04.22

Tabulatorドキュメント「Sparklines」より抜粋

formatterで外部JavaScriptライブラリを使用できます。この例では、人気のあるsparklines.jsライブラリを使用します。 値の配列をフィールドに渡し、カスタムフォーマッタを使用してこの配列を sparkline に変換します。

プログラムは Sparklines のサンプルプログラムから折れ線グラフを描画する部分を抜粋しました。

主な処理は以下の通り、

  • 折れ線グラフにしたい値をセルのデータに渡します。
  • グラフを描画する関数を記述します。

データに文字列,NaN があるとグラフ表示しないので(実行結果の line2 参照)、 関数checkLineFormatter ではデータを null にする処理を組み込んでいます。 null の箇所は空白になります(実行結果の line3 参照)。

以下がグラフを描画する関数です。

// 数値チェックなし関数
var lineFormatter = function(cell, formatterParams, onRendered){
    onRendered(function(){ 
        $(cell.getElement()).sparkline(cell.getValue(), {
            width:"100%",
            type:"line",
            // マウスホバーで数値をポップアップする
            disableTooltips:false
        });
    });
};
// 数値チェックあり関数
var checkLineFormatter = function(cell, formatterParams, onRendered){
    onRendered(function(){ 
        // isNaN チェックで数値以外をnullに変換
        var val=cell.getValue().map(item=>(isNaN(item))?null:item)
        $(cell.getElement()).sparkline(val, {
            width:"100%",
            type:"line",
            disableTooltips:false
        });
    });
};

折れ線グラフを描画するため sparkline,jquery を読み込みます。 sparkline, jquery は以下の cdn を使用します。

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.min.js"></script>

カラム定義

{title:"line",  field:"line", width:160, formatter:lineFormatter},
{title:"line2", field:"line2", width:160, formatter:lineFormatter},
{title:"line3", field:"line3", width:160, formatter:checkLineFormatter},

データ定義

{
    line :[1, 20, 5, 3,     0, 10, 13, 17, 15, 9, 11],
    line2:[1, 20, 5, 3,   NaN, 10, 13, 17, null, 9, 11],
    line3:[1, 20, 5, 3,   NaN, 10, 13, 17, null, 9, 11],
},

サンプルコード

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link href="https://unpkg.com/tabulator-tables@4.4.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.4.3/dist/js/tabulator.min.js"></script>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.min.js"></script>
</head>
<body onload=show_table()>
<h1 id=title>折れ線グラフ(sparklines)</h1>
<div id="table"></div>
<script type="text/javascript">
// 数値チェックなし関数
var lineFormatter = function(cell, formatterParams, onRendered){
    onRendered(function(){ 
        $(cell.getElement()).sparkline(cell.getValue(), {
            width:"100%",
            type:"line",
            // マウスホバーで数値をポップアップする
            disableTooltips:false
        });
    });
};
// 数値チェックあり関数
var checkLineFormatter = function(cell, formatterParams, onRendered){
    onRendered(function(){ 
        // isNaN チェックで数値以外をnullに変換
        var val=cell.getValue().map(item=>(isNaN(item))?null:item)
        $(cell.getElement()).sparkline(val, {
            width:"100%",
            type:"line",
            disableTooltips:false
        });
    });
};

var show_table=function(){
    var sparkData = [
        {
            line :[1, 20, 5, 3,     0, 10, 13, 17, 15, 9, 11],
            line2:[1, 20, 5, 3,   NaN, 10, 13, 17, null, 9, 11],
            line3:[1, 20, 5, 3,   NaN, 10, 13, 17, null, 9, 11],
        },
        {
            line :[1, 20, 5, 3,     0, 10, 13, 17, 15, 9, 11],
            line2:[1, 20, 5, 3, "str", 10, 13, 17, null, 9, 11],
            line3:[1, 20, 5, 3, "str", 10, 13, 17, null, 9, 11],
        },
    ];
    new Tabulator("#table", {
        data: sparkData,
        columns:[
            {title:"line",  field:"line", width:160, formatter:lineFormatter},
            {title:"line2", field:"line2", width:160, formatter:lineFormatter},
            {title:"line3", field:"line3", width:160, formatter:checkLineFormatter},
        ],
    });
}
</script>

著者プロフィール

naka

すきなコマンドは awk と bc です。なにかを計算する時、awk か bc を使います。

記事一覧Index