使ったのは・・・
Highcharts 5.0.7
問題の状態
myHighcharts.html
<!DOCTYPE html>
<html>
<head>
<title>Highchartsの練習</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="js/myHighcharts.js"></script>
</head>
<body>
<div id="barChart" style="width:30%; height:30%;"></div>
</body>
</html>
myHighcharts.js
/**
* 画面表示時にチャートを作成する.
*/
$(function () {
var seriesData = [5.08, 2.05, 6.75];
var barChartOptions = getBarChartOptions(seriesData);
Highcharts.chart('barChart', barChartOptions);
});
/**
* チャートオブジェクトをオブジェクトを取得する.
* @param {Array} seriesData チャートに表示するデータ配列.
* @return {Object} チャートオブジェクト.
*/
function getBarChartOptions(seriesData) {
var yAxisTickInterval = 0.5;
var yAxisRotation = 0;
var barChartOptions = {
chart: {
type: 'bar'
},
title: {
text: 'Highchartsの練習'
},
xAxis: {
title: {
text: 'X軸'
},
categories: ['でーた１', 'でーた２', 'でーた３']
},
yAxis: {
title: {
text: 'Y軸',
},
labels: {
format: '{value:.1f}',
rotation: yAxisRotation
},
tickInterval: yAxisTickInterval
},
series: [{
data: seriesData
}]
};
return barChartOptions;
}
改善案１
チャートの幅を広げる
myHighcharts.html
<!DOCTYPE html>
<html>
<head>
<title>Highchartsの練習</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="js/myHighcharts.js"></script>
</head>
<body>
<div id="barChart" style="width:80%; height:30%;"></div>
</body>
</html>
myHighcharts.jsは「問題の状態」と同じ
デメリット
- チャートが画面に複数あるパーツの１である場合にレイアウトが崩れる
改善案２
目盛の最小値をデータの値によってに変える
myHighcharts.htmlは「問題の状態」と同じ
myHighcharts.js
これより上は「問題の状態」と同じ
function getBarChartOptions(seriesData) {
var yAxisTickInterval = 0.5;
var yAxisRotation = 0;
var yAxisMin = getYAxisMin(seriesData, yAxisTickInterval);
var barChartOptions = {
chart: {
type: 'bar'
},
title: {
text: 'Highchartsの練習'
},
xAxis: {
title: {
text: 'X軸'
},
categories: ['でーた１', 'でーた２', 'でーた３']
},
yAxis: {
title: {
text: 'Y軸',
},
labels: {
format: '{value:.1f}',
rotation: yAxisRotation
},
tickInterval: yAxisTickInterval,
min: yAxisMin
},
series: [{
data: seriesData
}]
};
return barChartOptions;
}
/**
* Y軸の最小値を取得する
* @param {Array} seriesData チャートに表示するデータ配列.
* @return {number} Y軸の最小値.
*/
function getYAxisMin(seriesData, yAxisTickInterval) {
var yAxisMin = 0;
for (var i = 0, l = seriesData.length; i < l; i++) {
var n = seriesData[i];
if (n != null && !isNaN(n)) {
if (yAxisMin) {
yAxisMin = Math.min(yAxisMin, n);
continue;
}
yAxisMin = n;
}
}
yAxisMin = Math.floor(yAxisMin / yAxisTickInterval);
yAxisMin = yAxisMin * yAxisTickInterval;
return yAxisMin;
}
デメリット
- 目盛で表示する幅がデータによって左右される
- データの値に幅があると結局「...」が表示されたり問題が解決しない
改善案３
表示する目盛の個数を決める
myHighcharts.htmlは「問題の状態」と同じ
myHighcharts.js
これより上は「問題の状態」と同じ
function getBarChartOptions(seriesData) {
var yAxisTickInterval = 0.5;
var yAxisRotation = 0;
var yAxisTickAmount = 7;
var barChartOptions = {
chart: {
type: 'bar'
},
title: {
text: 'Highchartsの練習'
},
xAxis: {
title: {
text: 'X軸'
},
categories: ['でーた１', 'でーた２', 'でーた３']
},
yAxis: {
title: {
text: 'Y軸',
},
labels: {
format: '{value:.1f}',
rotation: yAxisRotation
},
// tickInterval: yAxisTickInterval, 目盛幅は指定しない。
tickAmount: yAxisTickAmount
},
series: [{
data: seriesData
}]
};
return barChartOptions;
}
ここでは「目盛幅(tickInterval)」を設定しません。
「メモリの数(tickAmount)」と一緒に指定するとうまく行きませんでした。
デメリット
- データの値によって目盛の幅が変わってしまう
改善案４
メモリの表示を斜めにする
※. この方法は、Highcharts 5.0.7 を使えばデフォルトでできますが、Highcharts 4.0.4 ではデフォルトでできなかったのであえて「rotation」に値を指定しています。
myHighcharts.js
これより上は「問題の状態」と同じ
function getBarChartOptions(seriesData) {
var yAxisTickInterval = 0.5;
var yAxisRotation = 75;
var barChartOptions = {
chart: {
これより下は「問題の状態」と同じ
デメリット
- 目盛に表示している文字列が長いと90度ぐらいまで曲げないと表示が切れる
- 表示によっては角度を変えても見にくい
参考サイト
Highcharts API ReferenceのyAxis
Highcharts.jsでグラフの目盛を調整する | cly7796.net
配列の中の最大値を取得する(NaN, null対応) - Qiita