JavaScriptでグラフを描画するのによく使われるChart.js。このライブラリでは円グラフを実装することはできるのですが、標準機能には分割円グラフ(分離円グラフとも。英語ではexploded pie chart)を実装する方法はないようです。
ですが、ちょっと工夫すれば分割円グラフを実装することができるので紹介します。利用するChart.jsは現時点で最新版のv3.7.0です。
Chart.js | Open source HTML5 Charts for your website
その前に高校生の時に習ったであろう、三角関数について復習します。
下記の図のような直角三角形があるとします。ここで、斜辺の長さをr、横方向の辺の長さをa、縦方向の辺の長さをb、rとaの内角の角度をθとします。
この時、aの長さはcos(θ)*r、bの長さはsin(θ)*rとあらわすことができます。つまり、円グラフの中心の座標と、分割したい扇の方向の角度が分かれば、分割した後の位置(x座標とy座標)が求めることができるということです。
Chart.jsにおいては、それぞれのデータの描画情報をいれたオブジェクトをもっており、円グラフの場合はArcPropsというオブジェクトで描画した扇の情報を取得できます。このオブジェクトの、xはx座標、yはy座標、startAngleは描画の始まりの角度、endAngleは終わりの角度を表します(ついでにいうと、innerRadiusは内側の半径、outerRadiusは外側の半径です。typeを’pie’とした場合、innerRadiusは0ですが、typeを’doughnut’とすると0より大きい値が入っています)。つまり、この値から分割した後の座標位置を求め、値を入れなおして再描画することで、分割円グラフができるわけです。
このArcPropsの取得方法はいくつかあるのですが、一つ一つ説明するのも面倒なので、先にサンプルをお見せします。
日本の地域 – Wikipediaを参考に、日本のそれぞれの地域の面積を円グラフで表したサンプルとなっています。それぞれの扇をクリックすると、扇が分割されるようにしています。
See the Pen
Untitled by amano225 (@amano225)
on CodePen.
上記のexplodeChartという関数の中で、分割した後の座標位置を求めて再描画する処理を行っています。引数のpropsがArcPropsです。onclickの第二引数の配列内の値のelementプロパティや、ChartオブジェクトのgetDatasetMetaで取得したdata配列の値から取得できるということが分かると思います。
ずらす方向については、扇の始まりの角度と終わりの角度の中心なので、足して２で割った値としています。OUTSIDE_DISTANCEという定数が、直角三角形の斜辺のrの長さを表しています。10と指定すると中心から10pxずらすようになっています(実は単位はよくわかってないのですが、多分pxだと思います)。
こうやって見た目を独自に変更できるということが分かると、いろいろ応用ができそうですね。
なお、今回紹介した方法は、Chart.js2だと動きません。ただ、指定の仕方が異なるだけでやることは変わらないので、Chart.js 3系と2系のオプションの違い 2021/9/21 – Qiitaを参考に、Chart.js2でも実装することはできかと思います。ヒントだけ伝えると、Chart.js2では、getDatasetMetaで取得したオブジェクトのdata配列の値の_modelにArcPropsと同じような値が入っています(Chart.js API · Chart.js documentation)。
コメント