みかづきブログ・カスタム

基本的にはちょちょいのほいです。

chartist.jsをつかってGETパラメータを円グラフとして描画するウェブサイトをつくる 📊

chartist.js

JavaScriptでグラフを描画したいときに使うライブラリとしては、Chart.jsが有名です。

www.chartjs.org

しかし、今回はchartist.jsを試してみました。
理由はChart.jsよりシンプルそうだったからです。

gionkunz.github.io

chartist.jsの使い方はexamplesをみたり、ドキュメントをみたりすればわかるので、多くは語るつもりはありません。

gionkunz.github.io
gionkunz.github.io

ですが、ひとつだけ語るとすると、Chart.jsと比べた際に特徴で、

  1. Chart.jsはグラフをCanvasに描画する
  2. chartist.jsはグラフをSVGで描画する

という違いの部分です。

SVGに描画されるということは、見た目はCSSで制御できるわけで、そこがChart.jsと比べた際にひとつの分かりやすさになっているのかなと思いました。

そして、せっかくなのでchartist.jsをつかって何かつくってみようと思いまして、試しにGETパラメータを基に円グラフを生成してくれるサイトをつくってみました。
よく考えたら、Chart.jsをつかってCanvasに描画すれば、画像としての書き出しもできたわけで、そっちのほうが良かったかもしれません。


DEMO

develop.kimizuka.org

?Great=55&Good=30&Nice=15

この部分を円グラフにしています。Greatが55%、Goodが30%、Niceが15%という意味です。
項目は最大12個まで増やすことができます。13個目以降はずーっと色が黒になります。

chartist.js

#title=how%20about%20this%3F

この部分がグラフのタイトルです。h1としてレンダリングされます。
しかし、SEOに引っかかる訳が無いページなのでh1としてレンダリングしたのは特に意味がないかもしれません。