chart.jsでポーラーチャートを作る❗❗

まずはサンプル

結構好きな感じです。

www.webprofessional.jp

↑のサイトを参考にさせていただいて、使い方を勉強しました。

コードの作り

chart.jsでポーラーチャートを作成するサンプルコード

せっかちな人は下のコード貼り付けたらとりあえず同じものができあがります。
プログラムをかじったことのある人なら、これだけで大体理解できると思います。

それくらい、シンプルにライブラリ化されているのが良いところですよね。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<canvas id="polarChart" width="400" height="400"></canvas>
<script type="text/javascript">
  var pChart = document.getElementById("polarChart"), pChartAnimFlag = false;

  var pChartFunc = function () {
  var ctx = pChart.getContext('2d'),
   chart = new Chart(ctx, {
       type: 'polarArea',
       data: {
         labels: ["夏間近", "ダイエット", "全く以て", "間に合わず", "ヘコむ"],
         datasets: [{
           backgroundColor: [
             "#93B5C6", "#DDEDAA", "#F0CF65", "#D7816A", "#BD4F6C"
           ],
           data: [1,2,3,4,5]
         }]
       },
       options: {
         title: {
           display: true,
           text: 'チャートサンプル'
         },
         scale:{
           ticks: {
             suggestedMin: 0,
             suggestedMax: 5,
             stepSize: 1
           }
         }
         }
     });
  };

  var pChartAnim = function () {
   var wy = window.pageYOffset,
     wb = wy + screen.height - 300,

     pChartPos = wy + pChart.getBoundingClientRect().top;

   if ( wb > pChartPos && pChartAnimFlag == false ) {
     pChartFunc();
     pChartAnimFlag = true;
   }
  };
  window.addEventListener('load', pChartAnim);
  window.addEventListener('scroll', pChartAnim);
</script>

chart.jsでポーラーチャートをいじる場合

ライトに流用するだけなら、下記をちょこちょこいじれば良い。
もっと細かく設定できますが、サンプルのようなグラフを描くには十分です。

ラベル設定

labels: [
  "夏間近",
  "ダイエット",
  "全く以て",
  "間に合わず",
  "ヘコむ"
]

ラベル名はlabelsってのをいじればいいです。

色の設定

backgroundColor: [
  "#93B5C6",
  "#DDEDAA",
  "#F0CF65",
  "#D7816A",
  "#BD4F6C"
]

各扇部分の配色はbackgroundColorで設定されます。
(なんでbackgroundColor"s"じゃないんだろ)

配色はいつも悩むので、以下のサイトで決めてもらっています。
coolors.co
悩んだときにとっても便利。

配点の設定

"配点"には違和感がありますが、ちょっと良い言い方が思いつかなくて、、
ここをいじれば扇の大きさが変えられます。

data: [1,2,3,4,5]

チャートのタイトルの設定

最後は簡単。

text: 'チャートサンプル'

ここをいじればチャートのタイトルを変えられます。

アニメーション起動の制御

これはchart.jsの機能ではないのですが、これがないと扇形が広がるアニメーションが制御できません。
デフォルトでは、ページが読み込まれたタイミングでアニメーションが起動します。
なのでブログの下の方にグラフが配置されていたりすると、アニメーションは一向に日の目を浴びません。

下のソースを加えると、ページロードとページスクロールで、グラフがスクリーンに顔を出したタイミングでアニメーションが起動するようになります。

キレイなアニメーションなので、ぜひ使ってみてほしいです。

  var pChartAnim = function () {
   var wy = window.pageYOffset,
     wb = wy + screen.height - 300,

     pChartPos = wy + pChart.getBoundingClientRect().top;

   if ( wb > pChartPos && pChartAnimFlag == false ) {
     pChartFunc();
     pChartAnimFlag = true;
   }
  };
  window.addEventListener('load', pChartAnim);
  window.addEventListener('scroll', pChartAnim);

さいごに

フロントエンド技術が超流行っていて、特にjsは面白いライブラリがたくさんありますね。
私はどちらかというとサーバーサイドのエンジニアですが、大きくWebと括ったときには知っておきたい技術の筆頭がjsです。

Vue.jsとかも面白そうですよね。
SIerとしては流行りの技術に触れる機会は多くないですが、いつでもアンテナは張っておいて、技術に明るく有りたいです。

技術に詳しくない人がシステム開発のマネジメントするなんて、信じられるわけないですし、いつまで経ってもブラック業界のままです。

エンジニアとして、マネジメントに付加価値を与えられる人になりたいです。

それはそれとして、、chart.js面白いので触ってみてくださいね！