[Highcharts]パーセンテージで描画する円グラフを描く方法


[Highcharts]パーセンテージで描画する円グラフを描く方法


Highcharts:完成形

これまでに何度か棒グラフを中心としたHighchartsのカスタマイズ方法を紹介してきました。
今回は円グラフの描画についてです。

スポンサーリンク

数値をパーセンテージで表したい!Highchartsの円グラフをカスタマイズする方法

※本記事はHighchartsを導入した事があり、基礎知識がある人向けの記事です。
これから導入を始めたい人は[導入編]の記事をどうぞ。

Highcharts

早速円グラフを描画してみよう

今回描画するグラフの完成系はこちら。
Highcharts:完成形
各項目の割合が%で表示されています。
コード全文はこちら。

ポイントを見ていきましょう。

ここはHighchartsを描画するうえで必ず必要になります。「piecharts」の部分は任意のグラフ名でOKです。

9行目でタイトルの指定をしています。タイトルを表示させたくない時は14行目のクォーテーションマーク内を空欄にしてください。

続いて16行目からオプション設定を行います。

19行目はデータラベルの文字色を指定しています。
20行目。ここで%表示のための指定を行います。
「this.point.name」は黒、白・・・と言ったデータ名です。後程紐づけします。「Math.round~」の部分で%表示の指定をしています。これにより自分で%を計算しなくても元データから自動で計算されるという事です。

通常、小数点1桁までの表示ですが、きりのいい数字は小数点以降非表示となります。
例)40.0→40と表示。
改行や太字にしたいときはhtmlタグを使うことができます。
Highcharts:%表示の方法
23行目のenabled: true,でラベルが表示されます。デフォルトでTrueです。
非表示にしたい時はfalseにしてください。

27行目のseriesでデータを指定します。

type: ‘pie’,で円グラフを指定。
name:’メインカラー’,
このnameに指定した名称がTooltipに反映されます。Tooltipは、%ではなく、dataで指定した数値が表示されます。下のグラフ参照。
Highcharts:Tooltip
data:[…]内のnameが、plotOptionsの「this.point.name」に紐づいています。
各データの表示領域に色を指定することも可能。省略した場合、highcharts側で適当に色付けされます。

trueで凡例が表示、falseで非表示になります。

もっと見栄えを調整したい!カスタマイズ補足

きりの良い数字でも小数点1桁まで表示したい。

上述した記述だと、40.0など、0終わりの場合は、40と表示されます。小数点一桁まで表示させたい時はplotOptions:の中のformatter: function()を以下に書き換えて下さい。

小数点2桁にしたい時は、下図の箇所を2に変えます。小数点以下非表示にしたい時は0に。最初からこの書き方にしておくと、修正対応など楽かもです。
Highcharts:小数点の指定について
Highcharts:小数点の指定について

Tooltipにも%を表示したい!

Tooltiopも%表示したいときは、以下を記述。
Tooltipに関しては、下記の記事もあるのでご参考までに。

Highcharts:Tooltipカスタマイズ

グラフの背景色を指定したい!

今回のサンプルのように、一部の項目が白の場合、背景と同化してしまいます。7行目の「renderTo:~」の下に背景色の指定を追加してください。

Highcharts:Tooltipカスタマイズ

和風デザイン勉強会