「ツールチップ」と聞くと、「ポテトチップ」を連想してしまう、ユゲタです。
ツールチップというのは、パソコンなどで表示されているチャートで、マウスカーソルを合わせると、そのピンポイントの箇所の情報が
ポップアップされるウィンドウの事です。
この画像の赤丸の箇所がツールチップです。
Chart.jsのデフォルトでは、黒背景に白い文字色で、必要最低限の値が表示されているだけですが、見栄えなどをカスタマイズする方法を紹介します。
日本語リファレンスは、
https://www.tohoho-web.com/ex/chartjs-params.html#tooltip
こちらがわかりやすいでしょう。
カスタマイズサンプル
<canvas id="graph_1"></canvas>
<script>
(function(){
function MAIN(){
this.colors = [
"rgba(255,0,0,0.5)",
"rgba(0,255,0,0.5)",
"rgba(0,0,255,0.5)",
"rgba(255,128,0,0.5)",
"rgba(0,255,255,0.5)",
"rgba(0,0,0,0.5)",
"rgba(255,0,255,0.5)"
];
this.view_chart_1();
}
MAIN.prototype.view_chart_1 = function(){
let canvas_1 = document.getElementById("graph_1");
if(canvas_1){
let col_num = 6;
let data_count = 50;
// setting
let ctx = canvas_1.getContext('2d');
let labels = [];
for(let i=1; i<=data_count; i++){
labels.push(i);
}
let datas = [];
for(let i=0; i<labels.length; i++){
datas.push(Math.floor(Math.random() * 10000));
}
let datasets = [
{
data : datas,
borderColor : this.colors[col_num],
backgroundColor : this.colors[col_num],
label : "graph-2"
}
];
let options = {
tooltips: {
intersect : false,
mode: 'index',
axis: 'x',
// title
titleFontSize : 12,
titleFontColor : 'black',
titleFontStyle:"normal",
titleAlign : "center",
// body
bodyFontSize : 12,
bodyAlign : "right",
bodyFontColor : "black",
// 吹き出し内の余白
xPadding: 10,
yPadding: 10,
borderColor: 'black',
borderWidth: 1,
backgroundColor: 'white',
cornerRadius: "0",
// 吹き出し口
caretSize:0,
// 表示文字のカスタマイズ
callbacks: {
title: (function (tooltipItem, data){
return "X軸 : "+ tooltipItem[0].index;
}).bind(this),
label: (function (tooltipItem, data){
return "Y軸 : " + tooltipItem.value;
}).bind(this),
}
},
// 凡例クリックをクリック無効にする
legend:{
onClick: function(){return false;},
},
scales: {
x : {
scaleLabel: {
display: true,
labelString: "年後"
},
ticks : {
maxTicksLimit : (function(labels , step){
let num = Math.round(labels.length / step);
return num;
})(labels , 1),
maxRotation: 0,
minRotation: 0,
callback: function(val, index) {
return (index + 1) % 5 === 0 ? val +"年" : "";
}
},
},
y : {
scaleLabel: {
display: true,
labelString: "万円"
},
ticks : {
callback: function(tick) {
return '¥' + tick.toString();
}
}
}
}
};
// view
this.chart_1 = new Chart(ctx, {
type : "line",
data : {
labels : labels,
datasets : datasets
},
options : options,
plugins : [
{beforeDraw : this.chart_plugin.bind(this)}
]
});
console.log(this.chart_1);
}
};
MAIN.prototype.chart_plugin = function(target){
let ctx = target.ctx;
var x = this.chart_1.tooltip.caretX;
var topY = this.chart_1.chartArea.top;
var bottomY = this.chart_1.chartArea.bottom;
ctx.save();
ctx.beginPath();
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.lineWidth = 2.0;
ctx.strokeStyle = 'red';
ctx.stroke();
ctx.restore();
};
switch(document.readyState){
case "complete" : new MAIN();break;
default : window.addEventListener("load" , function(){new MAIN()});break;
}
})()
</script>
解説
Chart.jsのツールチップのカスタマイズは、実は非常に奥が深く、canvas内に表示する、デフォルト方式の他に、
canvas外にHTMLエレメントとして、表示をする方法も、公式サイトで公開されている。
・・・が・・・
どうやっても、そのサンプルがうまく動作しなかったので、今回は、canvas内版でのカスタマイズ例を紹介したいと思います。
基本的に、デフォルトが黒バックに白文字という、あまりにも、ダサい状態なので、オサレな白地に黒で、文字サイズは抑えめにしたサンプルにしてみました。
そして、カスタマイズコードは、option/tooltips/以下の次の箇所になります。
// title
titleFontSize : 12,
titleFontColor : 'black',
titleFontStyle:"normal",
titleAlign : "center",
// body
bodyFontSize : 12,
bodyAlign : "right",
bodyFontColor : "black",
// 吹き出し内の余白
xPadding: 10,
yPadding: 10,
borderColor: 'black',
borderWidth: 1,
backgroundColor: 'white',
cornerRadius: "0",
// 吹き出し口
caretSize:0,
コメントを入れておいたので、そのまま理解できるとは思いますが、titleFontColorなどは、リファレンスサイトに載っていなかったので、
非常に苦労しました。
また、角丸を無くすのを、"borderRadius"とばかり思い込んでいたのが、"cornerRadius"だったことに気がつくまで、非常に時間を有しました。
こういうのって、手探りやったもんガチですね。
