今回は行の値を折れ線グラフ表示します。
主な処理は以下の通り、
- aa1,aa2,aa3のセル値を line のセルで折れ線グラフ表示にする。
- aa1,aa2,aa3のセルの合計値(bottomCalc)を line のセルで折れ線グラフ表示にする。
- formatter属性, bottomCalcFormatter属性で折れ線表示用の関数(lineFormatter)を指定する。formatter, bottomCalcFormatter で折れ線グラフを表示する関数(lineFormatter)は同じものです。
なお、tabulator 4.4.3 の場合、bottomCalcFormatter で指定した関数内で onRendered(formatterがレンダリングされたときに呼び出す関数)が呼び出されず 折れ線グラフ表示処理が動作しないため、tabulator4.5.3 以上を使用する必要があります。
今回は tabulator4.5.3 を使用します。 sparkline, jquery は 以下の cdn を使用します。
<link href="https://unpkg.com/tabulator-tables@4.5.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.5.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>
以下が折れ線グラフを描画する関数です。
// cell-セルデータ
// formatterParams-列に設定されたパラメーター
// onRendered-formatterがレンダリングされたときに呼び出す関数
const lineFormatter=(cell,formatterParams,onRendered)=>{
let ar = [];
let data = cell.getData();
for(let i in data){
if(i.match(/^aa/)){
// 'aa1,aa2,aa3' のデータを保存
ar.push(data[i]);
}
}
onRendered(()=>$(cell.getElement())
.sparkline(ar,{width:"100%",type:"line"})
);
}
以下、カラム定義、データ定義、実行結果、サンプルコードです。
カラム定義
const get_column=()=>{
return [
{title:"aa1",field:"aa1",align:"right",bottomCalc:"sum"},
{title:"aa2",field:"aa2",align:"right",bottomCalc:"sum"},
{title:"aa3",field:"aa3",align:"right",bottomCalc:"sum"},
{title:"line",field:"line",width:100,
formatter:lineFormatter, bottomCalcFormatter:lineFormatter},
];
};
データ定義
const get_data=()=>{
return [
{"aa1":100, "aa2":200, "aa3":300 },
{"aa1":120, "aa2":150, "aa3":100 },
{"aa1":150, "aa2":300, "aa3": 50 }
];
}
実行結果
サンプルコード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link href="https://unpkg.com/tabulator-tables@4.5.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.5.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>行の値を折れ線グラフ表示</h1>
<div id="table"></div>
<script type="text/javascript">
// cell-セルデータ
// formatterParams-列に設定されたパラメーター
// onRendered-formatterがレンダリングされたときに呼び出す関数
const lineFormatter=(cell,formatterParams,onRendered)=>{
let ar = [];
let data = cell.getData();
for(let i in data){
if(i.match(/^aa/)){
// 'aa1,aa2,aa3' のデータを保存
ar.push(data[i]);
}
}
onRendered(()=>$(cell.getElement())
.sparkline(ar,{width:"100%",type:"line"})
);
}
const get_column=()=>{
return [
{title:"aa1",field:"aa1",align:"right",bottomCalc:"sum"},
{title:"aa2",field:"aa2",align:"right",bottomCalc:"sum"},
{title:"aa3",field:"aa3",align:"right",bottomCalc:"sum"},
{title:"line",field:"line",width:100,
formatter:lineFormatter, bottomCalcFormatter:lineFormatter},
];
};
const get_data=()=>{
return [
{"aa1":100, "aa2":200, "aa3":300 },
{"aa1":120, "aa2":150, "aa3":100 },
{"aa1":150, "aa2":300, "aa3": 50 }
];
}
const show_table=function(){
new Tabulator("#table", {
data: get_data(),
columns:get_column(),
});
};
</script>