HCDコンサルティング(旧・中川勉社会保険労務士事務所FPウェブシュフ)のブログ

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]
            }]
        });
    });



投稿日

カテゴリー:

投稿者:

 最終更新日:

タグ: