グラフを描画するHighChartsで平均気温のグラフを描画する

グラフを描画するHighChartsを紹介します。
HighChartsはJavaScriptのグラフ描画ライブラリです。
HighChartsを使えば簡単にグラフの描画ができます。

デモページ

福岡市の平均気温をグラフで表示してみました。

http://codepen.io/shoyan/details/jrOjWK/

サンプルを作ってみる

簡単なサンプルを作ってみましょう。
私がサンプルとして利用していたCODEPENを利用すると簡単に作成できるのでオススメです。

HighChartsを使うには、jQueryとhighCharts.jsが必要です。

1
2
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

index.htmlのbody部は以下を定義します。
div要素にグラフが描画されます。

index.html

1
<div id="container" style="width:100%; height:400px;"></div>

JavaScript tag <script> </script> に書くか、外部ファイルに定義してください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
tags: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});

あとは、ブラウザでアクセスすればグラフが描画されます。

構文

基本的な構文は以下です。

1
$("グラフを描画するhtml要素").highcharts(option)

HighChartsの基本的なパラメーター(option)

HighChartsの基本的なパラメーター(option)を紹介します。

  • TITLE: チャートのタイトル
  • SERIES: 描画するデータの値
  • TOOLTIP: チャートにマウスオーバーしたときに表示されるツールチップの設定
  • LEGEND: SERIESの説明
  • AXES: 縦軸と横軸の説明を設定します。

グラフの種類について

typeにグラフの種類を設定できます。

  • 棒グラフ: column
  • 折れ線グラフ: line
  • 円グラフ: pie
  • 帯グラフ: bar
  • ヒストグラム: column
  • 散布図: scatter
  • 箱ひげ図: boxplot
  • 三角グラフ: pyramid

様々なグラフのデモページが用意されており、参考になります。

http://www.highcharts.com/demo