通貨表示は formatter に "money" を定義します。 値がマイナスの時、赤で表示するために formatter にカスタム関数(disp_red) を定義します。
しかし、formatter に２つを定義をすることはできません。
そのため、"money" 指定をやめて、カスタム関数(disp_red) で 「通貨表示(カンマ付数値表示)」と「数値を赤くする処理」を行うことにします。
// カスタム関数で通貨表示(カンマ付数値)を返す処理を行う。
// 小数点以下は四捨五入した。
var disp_red=function(cell){
var val = cell.getValue();
if(val<0) cell.getElement().style.color="#ff0000";
// valに値がある場合、通貨表示(カンマ付数値)に変換して返す
return (val)?Math.round(val).toLocaleString():val;
}
以下、カラム定義、データ定義、実行結果、サンプルコードです。
カラム定義
{
title:"数値",
field:"number",
align:"right",
formatter:disp_red, // カスタム関数
bottomCalc:"sum",
bottomCalcFormatter:disp_red, // カスタム関数
}
データ定義
{number: 3000.5},
{number: 100.4},
{number: 0},
{number: -10000},
{number: undefined},
{number: NaN},
{number: null},
実行結果
サンプルコード
<!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>
</head>
<body onload="show_table()">
<h1 id=title>通貨表示で値がマイナスの時、赤で表示する </h1>
<div id="table"></div>
<script type="text/javascript">
// カスタム関数で通貨表示(カンマ付数値)を返す処理を行う。
// 小数点以下は四捨五入した。
var disp_red=function(cell){
var val = cell.getValue();
if(val<0) cell.getElement().style.color="#ff0000";
// valに値がある場合、通貨表示(カンマ付数値)に変換して返す
return (val)?Math.round(val).toLocaleString():val;
}
var show_table=function(){
var tdata = [
{number: 3000.5},
{number: 100.4},
{number: 0},
{number: -10000},
{number: undefined},
{number: NaN},
{number: null},
]
new Tabulator("#table", {
data:tdata,
columns: [
{
title:"数値",
field:"number",
align:"right",
formatter:disp_red, // カスタム関数
bottomCalc:"sum",
bottomCalcFormatter:disp_red, // カスタム関数
}
],
});
}
</script>