JavaScript | Highcharts で最低限の五角形のグラフ (polar graph) を表示する

JavaScript | Highcharts で最低限の五角形のグラフ (polar graph) を表示する

WEB ページ上で様々なグラフを描画してくれるライブラリの一つである 「Highcharts (外部リンク) 」 は、何も指定しなくてもアニメーションしてくれたり、マウスオーバー時に数値表示してくれたり、タイトルや軸の名前を表示してくれたり…と、実に親切なのですが、
WEB ページ上の限られたスペースに表示したい時など、逆にあまりゴチャゴチャ表示されると困ることがあります。というか実際に自分が困りました (^^;
何を「最低限」と呼ぶかは人によると思いますが、ここでは以下のようなものを「最低限」と呼ぶことにします。

■エクスポート機能はいらない
・ユーザーに保存させる必要がないから
・表示スペースを削減したいから
■タイトルを非表示
・1 ページごとにグラフ 1 つなど、わざわざタイトルを表示しなくても意味が通じる状況下にあるから
・表示スペースを削減したいから
■シリーズ名を非表示
・シリーズがグラフ上に 1 つしかなく、わざわざ表示しなくても意味が通じる状況下にあるから
・表示スペースを削減したいから
■マウスオーバー時にシリーズ名・数値などを表示しない
・折れ線グラフなどと違って、表示する値の個数は少ないので、マウスオーバー時に表示させるメリットがあまり無いから
・常に表示しておいたほうが分かりやすいから
■Y軸方向 (極座標の動径方向) のラベル (1 目盛りごとの数値) を非表示
・五角形なので、各頂点に数値を表示したほうが分かりやすいから
・とても小さく表示したいため、ラベルを表示してもどうせ見えない状況下にあるから
■アニメーションを無効に
・必要がないから
・負荷の削減
■右下に表示されるクレジット表記を非表示
・表示スペースを削減したいから

ここで書いた理由は、自分が実際に使おうとした時の理由なので、すべての人がコレに当てはまるとは思いませんが、こういう時には非表示・無効にするといいよ~ってことで。

ゴチャゴチャしてるバージョン

※HTML・JavaScript は最小限だけ記述しています
※最初の <script> の部分は適宜書き換えてください

<script src="js/lib/jquery-2.1.4.min.js"></script>
<script src="js/lib/highcharts.js"></script>
<script src="js/lib/highcharts-more.js"></script>
<script src="js/lib/modules/exporting.js"></script>

<div id="container">
<script>
$('div#container').highcharts({

chart: {
polar: true
},

xAxis: {
categories: [
'音程',
'安定性',
'表現力',
'リズム',
'V&L'
],
tickmarkPlacement: 'on',
lineWidth: 0
},

yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
max: 100,
tickAmount: 6
},

series: [{
type: 'area',
data: [80, 70, 50, 95, 50],
pointPlacement: 'on'
}]

});
</script>
</div>

これを最低限だけ表示しようとすると、以下のようになります。

最低限だけ表示したバージョン

※HTML・JavaScript は最小限だけ記述しています
※最初の <script> の部分は適宜書き換えてください

<script src="js/lib/jquery-2.1.4.min.js"></script>
<script src="js/lib/highcharts.js"></script>
<script src="js/lib/highcharts-more.js"></script>

<div id="container">
<script>
$('div#container').highcharts({

/* クレジット非表示 */
credits: {
enabled: false
},

chart: {
polar: true
},

/* タイトル非表示 */
title: {
style: {
display: 'none'
}
},

xAxis: {
categories: [
'音程',
'安定性',
'表現力',
'リズム',
'V&L'
],
tickmarkPlacement: 'on',
lineWidth: 0
},yAxis: {
gridLineInterpolation: 'polygon',
/* ラベル非表示 */
labels: {
enabled: false
},

lineWidth: 0,
min: 0,
max: 100,
tickAmount: 6
},

plotOptions: {
series: {
/* 各頂点に数値表示 */
dataLabels: {
enabled: true
},
/* マウスオーバー時に表示しない */
enableMouseTracking: false,
/* アニメーションをオフ */
animation: false
}
},

series: [{
/* シリーズ名非表示 */
showInLegend: false,

type: 'area',
data: [80, 70, 50, 95, 50],
pointPlacement: 'on'
}]

});
</script>
</div>

これで最低限のグラフが表示できます (^^

さすがに X軸のラベルや各頂点の数値まで消してしまうと読み取りづらくなってしまうと思うので、ここまでで止めておきます (^^;

雑談

しばらくの間、ブログの更新が滞ってしまいました (^^;
大して内容がないネタはツイッターでつぶやき、ツイッターでは書ききれないようなことはブログに書こう、と決めていたのですが、最近大したことをしてなくて、書くネタが見つからず、そのままだらだらと過ごしてしまいました (><;
それでも、気が付いたら、このブログの訪問者がいつの間にか 10万人を突破していました …。
自分は日本語力が低いので、うまく言葉に表すことができませんが、とにかく訪問者の方々には大感謝です (_ _)
今後も更新は不定期になるかと思いますが、これからもよろしくお願いします。
ではまたいつか~ (^^ノシ