【javascript】chartjsで散布図を書いてクリック(click)を取得する方法

私はあるサービスを開発をしていて、散布図を使うことになったのでメモ。

 

散布図を書くために必要なもの

chartjsを使って散布図を書くために必要なものは以下の通り。

  1. Chart.min.js
  2. Javascriptでコーディングするスキル
  3. HTML/CSSの知識

 

今回は、このあと紹介するコードをコピペすれば動かすことができるようにしました。

散布図の実装例

作成した散布図は以下の通り。

散布図の実装例は以下のとおりです。

ポイントとしては、optionのところにonClickを設定すれば、イベントを取れるようになります。

どこをクリックされたか取得する場合は、

el[0]._datasetIndex

el[0]._index

を参照すればよいかと思います。

まとめ

以上、chartjsを使った散布図、clickの取得方法でした。

めでたし、めでたし。

\IT未経験者からのサポートあり!転職サービス3選!!/

サービス名
未経験 未経験OK 未経験の転職専用 経験者向け
公開の求人数 ITエンジニア全体で1万件以上
ITエンジニア未経験で600件以上
未公開 5,000件以上
利用対象 全職種 IT特化 IT特化
特徴 ✓誰もが知る転職サービス
✓経歴を登録しておくとオファーが来る
✓企業担当者と条件交渉
✓スキルの身につく企業を紹介
✓IT専門のエージェントが対応
✓転職成功すると年収200万円以上の大幅アップがある
転職サポート内容
  • 求人検索
  • 企業担当者と交渉
  • 求人紹介
  • ライフプランのサポート
  • キャリア相談
  • 求人紹介
  • 提出書類の添削
  • 面接対策
公式サイト リクナビネクスト テックゲート レバテックキャリア
最新情報をチェックしよう!
>プログラミングスクール検索・比較表サイト

プログラミングスクール検索・比較表サイト

ワンクリック、さらに詳細に条件を指定してプログラミングスクールの検索ができます。さらに比較表により特徴を細かく比較できる!

CTR IMG