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

先日導入したHighcharts.jsを使って円グラフを描いてみました。javascriptやjQueryの知識がなくても十分なグラフが描ける感じがします。

準備

まずは、下記投稿を参照して、Highcharts.jsを使うための準備をしてください。

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

グラフを表示したい場所に以下のコードを書いてください。

WordPressの場合は記事本文のいずれかの場所に書くことになります。

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

idは自由に決めていいのですが、今回はcontainerにしています。

グラフを描くための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 () {
        $('#container').highcharts({
            title: {
                text: 'ここに円グラフのタイトル'
            },
            plotOptions: {
                pie: {
                    dataLabels: {
                         formatter: function() {
                             return '<b>'+ this.point.name +'</b>:'+ Math.round(this.percentage*10)/10 + '%';
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: '',
                data: [
                    ['データA',4000],
                    ['データB',2500],
                    ['データC',200],
                    ['データD',504],
                    ['データE',210],
                    ['データF',30]
                ]
            }],
            tooltip: {
                formatter: function() {
                    return this.y +'人';},
                enabled:true
            }
        });
    });

カスタマイズの方法は次の通りです。

‘ここに円グラフのタイトル’

任意のタイトルに変えてください。中身を空にして「”」の状態にすると、タイトルを省略できます。

データA~E

[‘データA’,4000]のような[]で囲んだ形式で円グラフに記入するデータを書きます。

「データA」を別の言葉に置き換えれば別のラベルが付きます。

この記事冒頭のグラフではデータは6個ですが、データの個数は別に何個でも構いません。

[]で囲んだデータとデータを「,」でつなげば、円グラフにいくつでもデータを入れられます。

末尾のデータの後ろには「,」を付けないようにしてください。

‘人’

記事冒頭の円グラフは、パーセンテージで表示していますが、マウスオーバーで実数を表示するようになっています。

‘人’は実数に付ける単位です。好きな単位に置き換えて使ってください。

もう1つグラフを作りました

2013年においてインバウンドマーケティング戦略を取るか否かのアンケート結果のグラフです。

本当はもっと多機能

以上、「javascriptやjQueryを知らなくても使える」という点を強調したくて、とてもシンプルな円グラフを描いてみました。

でも実は、デモページやAPI Referenceを見れば、もっといろんなことが出来ます。

興味のある方はLet’s try！！

準備