前回は行の値を折れ線グラフにしましたが、今回は bottomCalc に列の値を折れ線グラフ表示します。
主な処理は以下の通り、
- 列の値の配列(values)を bottomCalc のカスタム関数 saveCellData() で保存する。
- bottomCalcFormatter のカスタム関数 lineFormatter()で保存した列の値の配列(values)を参照して折れ線グラフを描画する。
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>
以下が折れ線グラフを描画する関数です。
「第29回 行の値を折れ線グラフ表示」 と異なるのは、表示する値を bottomCalc で保存している点です。
// cell-セルデータ
// formatterParams-列に設定されたパラメーター
// onRendered-formatterがレンダリングされたときに呼び出す関数
const lineFormatter=(cell,formatterParams,onRendered)=>{
// 保存した列の値の配列を参照して折れ線グラフを描画する。
let values = cell.getValue();
onRendered(()=>$(cell.getElement())
.sparkline(values,{width:"100%",type:"line"})
);
}
// 列の値の配列を保存する。
const saveCellData=values=>{
return values;
}
以下、カラム定義、データ定義、実行結果、サンプルコードです。
カラム定義
const get_column=()=>{
return [
{title:"aa1",field:"aa1",align:"right",
bottomCalc:saveCellData, bottomCalcFormatter: lineFormatter},
{title:"aa2",field:"aa2",align:"right",
bottomCalc:saveCellData, bottomCalcFormatter: lineFormatter},
{title:"aa3",field:"aa3",align:"right",
bottomCalc:saveCellData, 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 values = cell.getValue();
onRendered(()=>$(cell.getElement())
.sparkline(values,{width:"100%",type:"line"})
);
}
// 列の値の配列を保存する。
const saveCellData=values=>{
return values;
}
const get_column=()=>{
return [
{title:"aa1",field:"aa1",align:"right",
bottomCalc:saveCellData, bottomCalcFormatter: lineFormatter},
{title:"aa2",field:"aa2",align:"right",
bottomCalc:saveCellData, bottomCalcFormatter: lineFormatter},
{title:"aa3",field:"aa3",align:"right",
bottomCalc:saveCellData, 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>