先日導入したHighcharts.jsを使って円グラフを描いてみました。javascriptやjQueryの知識がなくても十分なグラフが描ける感じがします。
準備
まずは、下記投稿を参照して、Highcharts.jsを使うための準備をしてください。
[img-link url=”https://webshufu.com/highcharts-js/” title=”色んなグラフを綺麗に描けるプラグインHighcharts.js｜Web Shufu”]
グラフを表示したい場所の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！！