jQuery
jQuery

会社のシステムでグラフ表示させたいことがあって

PHPでグラフを作成も考えたのですが

実装が簡単そうな「Hightcharts」を使ってみました。

1.Hightchartsのサイトへ行ってダウンロード

Hightcharts

Highcharts
Highcharts

本家サイトへ行って赤枠のところからHightchartsダウンロードページに移動します。

Highchartsダウンロード
Highchartsダウンロード

ダウンロードページで赤枠のとこおからHighchartsをダウンロードします。
※この記事の現時点ではver3.0.7です。

ダウンロードすると以下のような中身になってます。

Highchartsフォルダ
Highchartsフォルダ

index.htmlを開くとデモが見られます。

2.Hightchartsのインストール

使うファイルはjsフォルダにある「highcharts.js」です。

これをheadタグ内に読み込ませます。

HighchartsはjQueryを使うので

jQueryを読み込ませた後でHighchartsを読み込ませます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/highcharts.js"></script>

これで準備は完了です。

3.グラフを描いてみる

折れ線グラフ

簡単にグラフを描いてみます。

先ほど読み込ませた「highcharts.js」の下に書きます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/highcharts.js"></script>
<script type="text/javascript">
$(function () {
    $('#container').highcharts({
        series: [{
            name: '東京',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: '名古屋',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: '大阪',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: '福岡',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });
});
</script>

グラフを描写するところを作ります。

<div id="container"></div>

すると以下のようなグラフが作成されます。

折れ線グラフ
折れ線グラフ

折れ線グラフデモ

デフォルトではグラフは折れ線グラフです。

オプション内のseriesの中にデータを入れます。

nameに折れ線グラフ名、

dataにプロットするグラフデータを並べます。

縦棒グラフ

続いて棒グラフです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/highcharts.js"></script>
<script type="text/javascript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        series: [{
            name: '東京',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: '名古屋',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: '大阪',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: '福岡',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });
});
</script>
縦棒グラフ
縦棒グラフ

縦棒グラフデモ

オプションにchartを追記して

type: ‘column’を設定します。

横棒グラフ

横棒グラフです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/highcharts.js"></script>
<script type="text/javascript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        series: [{
            name: '東京',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: '名古屋',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: '大阪',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: '福岡',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });
});
</script>
横棒グラフ
横棒グラフ

横棒グラフデモ

オプションのchartを

type: ‘bar’に設定します。

散布図グラフ

散布図グラフです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/highcharts.js"></script>
<script type="text/javascript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'scatter',
        },
        series: [{
            name: 'Female',
            data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
                [159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
                [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
                [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]]

        }, {
            name: 'Male',
            data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
                [181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],
                [170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.5, 98.2], [177.8, 84.1],
                [180.3, 83.2], [180.3, 83.2]]
        }]
    });
});
</script>
散布図
散布図

散布図グラフデモ

オプションのchartを

type: ‘scatter’に設定します。

データの作り方も少し変わります。

散布させたいデータをグループにして並べます。

円グラフ

円グラフです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/highcharts.js"></script>
<script type="text/javascript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'pie',
        },
        series: [{
            data: [
                ['Firefox',45.0],
                ['IE',26.8],
                ['Chrome',12.8],
                ['Safari',8.5],
                ['Opera',6.2],
                ['Others',0.7]
            ]
        }]
    });
});
</script>
円グラフ
円グラフ

円グラフデモ

オプションのchartを

type: ‘pie’に設定します。

先ほどの散布図と同じように

データをグループにして並べる形です。

4.グラフ表示のオプション

グラフを装飾するためにオプションが用意されてます。

簡単に最初の折れ線グラフを装飾します。

$(function () {
    $('#container').highcharts({
        title: {//グラフタイトル
            text: '全国気温グラフ',
        },
        subtitle: {//グラフサブタイトル
            text: '都市ごとの気温',
        },
        xAxis: {//横軸
            title: {//横軸タイトル
                text: '月'
            },
            categories: [//横軸値
                '1月', '2月', '3月', '4月', '5月', '6月',
                '7月', '8月', '9月', '10月', '11月', '12月'
            ]
        },
        yAxis: {
            title: {//縦軸タイトル
                text: '気温(°C)'
            }
        },
        legend: {//凡例
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: '東京',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: '名古屋',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: '大阪',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: '福岡',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });
});
折れ線グラフオプション付き
折れ線グラフオプション付き

折れ線グラフオプション付きデモ

グラフタイトルなど設定もできます。

本家サイトのデモのソースを見ると

色々設定ができるようなのでとても便利ですよ。

Highchartsデモ

(参考)
湯葉でも分かるHighcharts

感想

簡単にグラフを作成できるのでかなり便利です。

見た目のデザインもシンプルなので

使いやすいですよ。

他にもグラフ用のjQueyがありました。

jQuery Visualize
jQuery Visualize

jQuery Google Charting
jQuery Google Charting

関連記事:

jQuery(jQuery)自動整列プラグインjQuery masonry jQuery(jQuery)ページ送りを実装するプラグインjQuery Pagenation jQuery(jQuery)プラグインのWYSIWYGエディタ 「CLEditor」を導入しました。 jQueryjQueryプラグイン 複数選択可能なmultiselectを使ってみました。 CakePHP(CakePHP2.x) JavascriptをViewに書く方法 jQueryjQuery チェックボックスの全チェック、外しを実装（修正版） jQuery[jQUery] IE対策のためajaxでのキャッシュの無効化 Wordpress(WordPress)アップデート後にバージョンを戻すダウングレード方法