jQueryプラグインHighcharts.jsで横棒グラフを描いてみました。

更新

2013-05-09_1744

先日導入した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: '学力テスト'
},

の部分は以下の様にグラフの題名を表します。
2013-05-09_1644_001

「学力テスト」の部分は自由に変えられます。

xAxis

xAxis: {
categories: ['英語', '数学', '国語', '3科目平均'],
title: {
text: '科目',
align: 'high',
rotation: 0
}
},

xAxisは、グラフの縦軸に書くラベルを決めるところです。

categoriesは赤枠内、textは青枠内に書き入れる語句を決めます。
2013-05-09_1645
記事冒頭のグラフでは、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]
}]
});
});


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です