先日Highcharts.jsを導入して以来「こんなに簡単にグラフが描けるとは」と感動しまくりな@web_shufuです。今回は、折れ線グラフを描いてみました。とても簡単です。

グラフを表示したい場所のhtmlコード

グラフを表示したい場所に以下のHTMLを書きます。

<div id="line"></div>

グラフを描くための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 () {
        $('#line').highcharts({
            chart: {
                type: 'line',
                marginRight: 130,
                marginBottom: 25
            },
            title: {
                text: '年度別売上高',
                x:-20 //center
            },
            xAxis: {
                categories: ['10', '11', '12', '13(予想)']
            },
            yAxis: {
                title: {
                    text: '売上（億円）',
                    align: 'middle',
                    rotation: -90

                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '億円'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -80,
                y: 0,
                borderWidth: 0
            },
            series: [{
                name: 'A社',
                data: [400,450,550,300]
            }, {
                name: 'B社',
                data: [195,210,250,325]
            }, {
                name: 'C社',
                data: [600,435,295,405]
            }, {
                name: 'D社',
                data: [550,600,450,650]
            }]
        });
    });

title

上のコードの中で

title: {
    text: '年度別売上高',
    x:-20 //center
},

の「text: ‘年度別売上高’」は以下の様にグラフの題名を表します。

「年度別売上高」の部分は自由に変えられますし、「text: ”」とすると題名無しになります。

xAxis

xAxis: {
    categories: ['10', '11', '12', '13(予想)']
},

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

記事冒頭のグラフでは、categoriesに4ラベルしか設定していません。

しかし、ラベルを「’」で囲んで、ラベル同士を「,」で連結することで、categoriesのラベルはいくらでも増やせます。

yAxis

yAxis: {
    title: {
        text: '売上（億円）',
        align: 'middle',
        rotation: -90

    },
    plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
    }]
},

yAxisはグラフの縦軸に書くラベルの設定です。

「text: ‘売上（億円）’」で縦軸の数値の指す内容と単位を決めています。

tooltip:

tooltip: {
    valueSuffix: '億円'
},

valueSuffix:は折れ線にマウスオーバーしたときに表示される数値の後ろに付ける単位です。今回は売上（億円）が表示されるので’億円’です。

series:

series: [{
    name: 'A社',
    data: [400,450,550,300]
}, {
    name: 'B社',
    data: [195,210,250,325]
}, {
    name: 'C社',
    data: [600,435,295,405]
}, {
    name: 'D社',
    data: [550,600,450,650]
}]

name:で社名を決めて、data:で’10,’11,’12,’13の順に点数データを与えています。

今回社名は4社ですが、

{
    name: '○○',
    data: [○, ○, ○, ○]
}

を「,」で連結することで、いくらでも増やせます。