グラフとチャートの違いをなんとなく理解している、ユゲタです。
縦横の軸があるのがグラフで、それも含めて軸が無いのがチャートなのだそうです。
なので、チャートという大分類の中にグラフがあるという事で、次のような構図になるそうですよ。
チャート > グラフ
それはさておき、今回は、グラフのX軸に数値の値が少し長くなってしまう場合に、
Chart.jsは、自動的に斜めにして、なるべく重ならないように配置してくれます。
でも、もう少し見栄えを良くしたいと考えた時のテクニックをお教えします。
このグラフの場合、x軸に「○年」という表示にしているんですが、画面表示サイズによっては、飛び飛びの間隔で表示されてしまっています。
おまけに斜めに表示されてしまって、なんだかもっとスマートに表示したい場合どうすればいいのでしょう？
【お断り】
このブログ記事は、Chart.jsの標準的な使い方ができる人が対象です。
Char.jsの基本設定などは、本家サイトのサンプルなどで使える人を対象にしていますので、下記リンクから環境を作ってから本ページを参照ください。
Chart.js
サンプルコード
<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 = 5;
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 : {
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)
}]
});
}
};
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>
解説
まず、斜め表示をしなくなるようにするには、
次のコードで行います。
// options/scales/x/ticks/内に次を追加
maxRotation: 0,
minRotation: 0
画面が小さい場合には斜め表示にしたい場合は、次のようにします。
maxRotation: (window.innerWidth >= 500) ? 0 : 45,
minRotation: (window.innerWidth >= 500) ? 0 : 45,
画面の横幅が500pxよりも小さい場合に、45度回転をさせて表示重なりを防ぐようにします。
そして、次にも文字の間引きを自分でコントロールすることで、見栄えを良くするために、サンプルでは1年から50年までの値を5の倍数の箇所で表示するようにしています。
// options/scales/x/ticks/内に次を追加
callback: function(val, index) {
return (index + 1) % 5 === 0 ? val +"年" : "";
}
さらに、次のコードをセットしないと、自動間引きが変な風に作動してしまいます。
// options/scales/x/ticks/内に次を追加
maxTicksLimit : (function(labels , step){
let num = Math.round(labels.length / step);
return num;
こうしておくことで、自動で間引かれること無く表示することができます。
ただし、１つの文字列の長さをちゃんと計算しておく必要があるので、あまりにも長くなりそうであれば、文字列の内容をコントロールする必要があるので、
この辺は仕様との相談ですね。
