Chart.jsのレーダーチャートのpointlabelにonClickイベントをつける

さっくり知りたい人のための要約

• Chart.jsにはpointLabelへのonClickはデフォルトで用意されていない
• 自作する場合は、<canvas></canvas>にonClickイベントをつけて座標計算する必要がある
  • マウスのクリックイベントから座標を取得して、canvas内のpointLabelの座標内か判断する必要がある
  • pointLabelの座標も自力で計算する必要がある
• 実行結果 | ソース | 私なりの解説

はじめに

• __pointLabel__ってどこのこと？
  →レーダーチャートのチャート外に表示されてる文字の部分（ここのこと）
  

• Chart.js用意されてないの？
  →ない...はず....(v2.9.3現在)
  後で詳細に説明するけれど、canvasのどこをクリックして、それがラベルのある座標なのかを計算してむりくり実装するしかなさそう。
  有志が計算部分省略するためにchartObjectにpointLabelの座標を入れてくれ〜という提案をしているのでこのissue盛り上げて採用されよう

• あなたが考案したソース？
  →いいえ、こちらのStackOverflowの回答者simoncogginsから引用したものであり、彼の実装を元にコメントを日本語訳したくらいのものを紹介します。
  前述のissue書いてる人も同一人物です。感謝...

いざ実装

今回の記事では v2.9.3 の Chart.js を利用します。(この記事を下書きに放置している間に2.9.4が出てるっぽい）
また、jQueryとかもなしのピュアなjavascriptで記載します。 jQueryとか他使っている人は適宜読み替えてくださいませ。

完成図

(実はGithubも用意してあるけれどまあCodePenあればいらないカモ)

See the Pen MWKXQLN by 中村＠ガウチャ (@_nakashimamura) on CodePen.

実装手順

1. レーダーチャートを描画
2. クリックイベントをレーダーチャートを描画するcanvasに設定
3. クリックされたらクリックされた箇所がpointLabelかを座標計算して判定
4. ラベルだったときは必要な処理をする！ 終わり！

＊今回はcallbackは特別なことせずに、ただalertでイベントから受け取った情報を出すようにします

いざいざ実装

本題は 3. からなのでそこだけ読みたい人は

1. レーダーチャートを描画

HTML側はChart.jsとjsの読み込み、それとcanvasの設定。#chartCanbasにレーダーチャートを表示させる。
(Chart.jsをnpmでインストールしてjs側でimportしても良いけど今回はちゃちゃっとCDNから読み込んじゃう）

index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<script src="./local.js"></script>

<!-- レーダーチャートを表示させるcanvas -->
<canvas id="chartCanvas"></canvas>

local.js

window.onload = () => {
  const chartArea = document.getElementById("chartCanvas"); // canvasのDom
  const radar = new Chart(new Chart(target.getContext("2d"), {type: "radar" .../* 省略 */...});
};

レーダーチャートの表示部分は今回の記事では__紹介しません__。
公式ドキュメントとか、日本語翻訳してくれてる有志のサイトを参考に作ると良いかと！

2. クリックイベントをレーダーチャートを描画するcanvasに設定

特別なこともなく、いつものようにcanvasにonclickイベントを登録するだけ。
忘れずeventオブジェクトを引数で受け取ってください。

window.onload = () => {
  const chartArea = document.getElementById("chartCanvas");
  const radar = new Chart(new Chart(target.getContext("2d"), {type: "radar" .../* 省略 */...});

  // 以下canvasにクリックイベントを登録
  chartArea.onclick = (e) => {
    //
  }
};

3. クリックされたらクリックされた箇所がpointLabelかを座標計算して判定

さて、ここからが本記事の本題！
コードは全てchartArea.onclick = (e) => {内にかかれるものとして読んでください。

座標計算の流れとしては今回は

1. クリック位置を取得
2. ラベルの数だけループを回し、
3. ラベルがどこに描画されているかを計算 (これが大変)
4. クリック位置がラベルの範囲か計算・判定
5. ラベルをクリックしたのなら目的の処理を行う
6. ループを抜ける
   となっています。

1. クリック位置を取得

// canvas内のクリックしたx,y座標
const mouseX = e.offsetX;
const mouseY = e.offsetY;

2. ラベルがどこに描画されているかを計算
new Chart()した際の戻り値であるchartObjectにラベルの座標はなので、
marginやpadding、fontSizeの設定値やラベルの文字数から計算する他ないです。
しかもラベルは１つじゃないのでループを回して全てを計算する必要があるという分けです。

前準備
まず目盛り文字の高さと一番外側の目盛り文字のレーダーチャート中心からの距離が必要ですので取得しておきます。
ラベルはこの目盛りより外に表示されますからね。

const helpers = Chart.helpers; // 
const scale = radar.scale; // 軸
const opts = scale.options; // チャート全体の設定
const tickOpts = opts.ticks; // 目盛り

// 目盛りの高さ
// 基本はfontsize + 5px
const tickBackdropHeight =
  tickOpts.display && opts.display // chartの設定で optionで目盛りが表示されているか
    ? helpers.valueOrDefault(
        tickOpts.fontSize,
        Chart.defaults.global.defaultFontSize
      ) + 5
    : 0;

// 目盛りの中央からの距離
const outerDistance = scale.getDistanceFromCenterForValue(
  opts.ticks.reverse ? scale.min : scale.max
);

Chart.helpersについてはバージョン違いだが、こちらを参照。
scaleが持っているmethodは同じくバージョン違いだがこちらが参考になるっぽい。

ラベルの位置を計算
ではループを回してラベル類の位置を特定していきましょう。

// ポイントラベル分ループ
for (var i = 0; i < scale.pointLabels.length; i++) {
  // 軸ラベルによってチャート上部に余分な空白があるので削除
  const extra = i === 0 ? tickBackdropHeight / 2 : 0;
  const pointLabelPosition = scale.getPointPosition(
    i,
    outerDistance + extra + 5
  );

  // ラベルサイズ情報を取得
  const plSize = scale._pointLabelSizes[i];

  // ラベルのtextAlignを取得する(ラベルの描画位置が変わるので)
  const angleRadians = scale.getIndexAngle(i);
  const angle = helpers.toDegrees(angleRadians);
  let textAlign = "right";
  if (angle == 0 || angle == 180) {
    textAlign = "center";
  } else if (angle < 180) {
    textAlign = "left";
  }

  // ラベルの垂直オフセット位置を取得
  // drawPointLabels()から取得し計算
  let verticalTextOffset = 0;
  if (angle === 90 || angle === 270) {
    verticalTextOffset = plSize.h / 2;
  } else if (angle > 270 || angle < 90) {
    verticalTextOffset = plSize.h;
  }

  // 対象のラベルの範囲の位置を計算(padding含み)
  const labelTop = pointLabelPosition.y - verticalTextOffset - labelPadding;
  const labelHeight = 2 * labelPadding + plSize.h;
  const labelBottom = labelTop + labelHeight;

  const labelWidth = plSize.w + 2 * labelPadding;
  let labelLeft;
  switch (textAlign) {
    case "center":
      labelLeft = pointLabelPosition.x - labelWidth / 2;
      break;
    case "left":
      labelLeft = pointLabelPosition.x - labelPadding;
      break;
    case "right":
      labelLeft = pointLabelPosition.x - labelWidth + labelPadding;
      break;
    default:
      console.warn("WARNING: unknown textAlign " + textAlign);
  }
  let labelRight = labelLeft + labelWidth;

  // ...以降クリックされたか判定などなど...

} // end of for

まんま貼り付けただけですが、textAlignを自力で取得したりするところがみそですね。
CSS的なのtextAlignではなく、レーダーチャートのの外周、左右上下のどこに描画されているかを計算しています。

5. ラベルをクリックしたのなら目的の処理を行う
6. ループを抜ける
for文の最後に以下で判定して完成でっす！

  // クリックされた範囲がラベルか判定
  if (
    mouseX >= labelLeft &&
    mouseX <= labelRight &&
    mouseY <= labelBottom &&
    mouseY >= labelTop
  ) {
    // したい処理をここに記載！！
    // なにか値が必要な場合もここまでで取得できていそうなのでなんでもできるかと！
    break; //ラベルクリックがわかったので処理を終了
  }

以上で目的は達成かと思います。

最後に

本当に以下の回答に Thanks!
https://stackoverflow.com/a/58296237