グラフをキレイに見せるコツは、ラベルの表示方法にあることに気がついた、ユゲタです。
グラフの「ラベル」というのは、縦横の値の目安になる値を表示しているアレです。
この画像の赤枠の箇所です。
Chart.jsでは、値がたくさんある場合に、適度に間引いてくれる機能や、長さが隣と干渉する場合に、
角度をナナメにして、文字の重なりを防いでくれる機能がデフォルトでついていますが、
自動的に判断されるため、思ったとおりにならない場合も多いでしょう。
あと、値に対してそれぞれ単位を付与したいという要望も多いため、
今回は、これらをセットしたサンプルを紹介してみたいと思います。
【お断り】
このブログ記事は、Chart.jsの標準的な使い方ができる人が対象です。
Char.jsの基本設定などは、本家サイトのサンプルなどで使える人を対象にしていますので、下記リンクから環境を作ってから本ページを参照ください。
Chart.js
サンプルコード
(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 = 4;
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 = {
responsive: true,
tooltips : {
intersect : false,
mode: 'index',
axis: 'x'
},
scales: {
x : {
scaleLabel: {
display: true,
labelString: "年後"
},
ticks : {
callback: function(tick) {
return tick.toString() + '年';
}
}
},
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)
}]
});
}
};
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;
}
})()
解説
カスタマイズポイントは、以下の２つになります。
１、ラベルに単位をつけて表示する。
２、ラベル横に「ラベルの見出し」を表示する。
１、ラベルに単位をつけて表示する。
基本的には、datassetの値（数値）が表示されるのがデフォルトですが、単位をつけることで、何のグラフを表現しているのか、非常にわかりやすくなります。
そのために必要なセットは、optionsの中に「scales」をセットし、その中に「x」と「y」のラベルの設定ができるようになります。
単位を文字列で追加するには、さらにその中に「ticks」を追加してそのcallback属性に、
callback: function(tick) {
return tick.toString() + '単位';
}
とすることで、追加された文字列として、表示されます。
正直この機能ってデフォルトにしてくれてもいい感じがするけど、とりあえず、これで問題なく表示できます。
２、ラベル横に「ラベルの見出し」を表示する。
ラベルは、単位よりも簡単で、「options/scales/(x,y)/」の中に、
scaleLabel: {
display: true,
labelString: "文字列"
},
とすることで、文字列をX軸、Y軸それぞれに表示させることができます。
とりあえず、今回は、簡単でしたが、比較的要望の多いカスタマイズの紹介でした。
