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

更新

2013-05-08_2351

先日導入した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!!


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です