先日導入したHighcharts.jsを使って横棒グラフを描いてみました。円グラフのときと同様、javascriptやjQueryの知識がなくても、まずまず十分な横棒グラフが出来ました。
グラフを表示したい場所のhtmlコード
グラフを表示したい場所に以下のコードを書いてください。
WordPressの場合は記事本文のいずれかの場所に書くことになります。
<div id="bar"></div>
idは自由に決めていいのですが、今回はbarにしています。
グラフを描くためのJquery
Highcharts.jsを使うための準備が終わっていれば、</body>の直前に以下のようなコードが挿入されているはずです。
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script type='text/javascript' src='(highcharts.jsへのパスを書く)'></script>
<script>
‥‥(グラフを描くためのJqueryを書く)‥‥
</script>
上記の「‥‥(グラフを描くためのJqueryを書く)‥‥」の部分に以下を書き入れます。
$(function () {
$('#bar').highcharts({
chart: {
type: 'bar'
},
title: {
text: '学力テスト'
},
xAxis: {
categories: ['英語', '数学', '国語', '3科目平均'],
title: {
text: '科目',
align: 'high',
rotation: 0
}
},
yAxis: {
min: 0,
max: 100,
title: {
text: '点数',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: '点'
},
plotOptions: {
bar: {
dataLabels: {
enabled: false
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: 0,
y: 0,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true,
reversed: true,
},
credits: {
enabled: false
},
series: [{
name: '香川',
data: [70, 95, 50, 72]
}, {
name: '本田',
data: [80, 90, 65, 78]
}, {
name: '前田',
data: [85, 95, 70, 83]
}, {
name: '岡崎',
data: [55, 95, 70, 73]
}, {
name: '遠藤',
data: [85, 40, 100, 75]
}]
});
});
以下、カスタマイズ可能な部分について説明します。
title
上のコードの中で
title: {
text: '学力テスト'
},
の部分は以下の様にグラフの題名を表します。
「学力テスト」の部分は自由に変えられます。
xAxis
xAxis: {
categories: ['英語', '数学', '国語', '3科目平均'],
title: {
text: '科目',
align: 'high',
rotation: 0
}
},
xAxisは、グラフの縦軸に書くラベルを決めるところです。
categoriesは赤枠内、textは青枠内に書き入れる語句を決めます。
記事冒頭のグラフでは、categoriesに4項目しか設定していません。
しかし、項目を「’」で囲んで、項目同士を「,」で連結することで、categoriesの項目はいくらでも増やせます。
yAxis
yAxis: {
min: 0,
max: 100,
title: {
text: '点数',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
yAxisはグラフの横軸に書くラベルの設定です。
min: 0,
横軸の左端の目盛を設定します。普通は0です。
max: 100,
横軸の右端の目盛をセってします。今回は100点満点の点数を表示しているので100です。作るグラフによって適宜変えてください。
text: ‘点数’,
横軸の数値が表す内容を指定します。今回は’点数’ですが、適宜変えることが出来ます。
tooltip:
tooltip: {
valueSuffix: '点'
},
valueSuffix:はグラフをマウスオーバーしたときに表示される数値の後ろに付ける単位です。今回は点数が表示されるので’点’ですが、適宜変えます。
legend
ここもカスタマイズできますが、今回は説明しません。
興味のある方はデモページやAPI Referenceを参考にカスタマイズしてください。
series:
series: [{
name: '香川',
data: [70, 95, 50, 72]
}, {
name: '本田',
data: [80, 90, 65, 78]
}, {
name: '前田',
data: [85, 95, 70, 83]
}, {
name: '岡崎',
data: [55, 95, 70, 73]
}, {
name: '遠藤',
data: [85, 40, 100, 75]
}]
name:で登場人物を決めて、data:で英・数・国・平均の順に点数データを与えています。
今回は登場人物は5人ですが、
{
name: '○○',
data: [○, ○, ○, ○]
}
を「,」で連結することで、いくらでも増やせます。
もう1つグラフを作ってみました。
とてもシンプルなグラフを作ってみました。ご参考にしてください。
html
<div id="bar2"></div>
グラフを描くためのJquery
<script>と</script>で以下のコードを挟んで、</body>の直前に書き入れてください。
$(function () {
$('#bar2').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'A社売上高'
},
xAxis: {
categories: ['10', '11', '12', '13予想'],
title: {
text: '年度',
align: 'high',
rotation: 0
}
},
yAxis: {
min: 0,
max: 500,
title: {
text: '売上高',
align: 'high'
},
labels: {
overflow: 'justify'
},
plotBands: [{
thickness: '50'
}]
},
tooltip: {
valueSuffix: '億円'
},
plotOptions: {
bar: {
dataLabels: {
enabled: false
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: 0,
y: 0,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true,
reversed: true,
},
credits: {
enabled: false
},
series: [{
name: '売上高',
data: [170, 250, 350, 420]
}]
});
});