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

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

 

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

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

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

 

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

散布図の実装例

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

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

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

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

el[0]._datasetIndex

el[0]._index

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

まとめ

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

めでたし、めでたし。

プログラミング・実務経験がある方も必見!
空いた時間をスキルアップ・収入増に使ってみませんか?

副業で仕事を取る方法を教えてくれる!
プログラミングスクール4選の詳細

最新情報をチェックしよう!
>プログラミングスクール検索・比較表サイト

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

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

CTR IMG