質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

8146閲覧

円グラフの各項目にそれぞれ違うイベントをさせたい

kurotobi

総合スコア13

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/09/09 13:08

編集2016/09/09 13:53

###前提・実現したいこと
Chart.jsで表示させた円グラフの各項目をクリックした際にそれぞれ違うモーダルウィンドウが出るようにしたいです
(赤の範囲ではAのモーダル、緑ではBのモーダル…というイメージです)
イメージ説明
###発生している問題・エラーメッセージ
上記の事をしたいのですが赤・緑・黄の範囲をどのように取得してよいか分からず悩んでいます。
それぞれをhoverした際に色を変えることが出来るならクリックも同じように出来るのでは…?と考えていたのですが…

###該当のソースコード

<!doctype html> <html> <meta charset="utf-8"> <title>pie</title> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script> </head> <body> <canvas id="chart-area" width="400" height="400"></canvas> <script type="text/javascript"> var ctx = document.getElementById("chart-area").getContext("2d"); var myPieChart = new Chart(ctx, { type: 'pie', data:{ labels: ["Red", "Green", "Yellow"], datasets: [{ backgroundColor: [ "#f7464a", "#46bfbd", "#fdb45c" ], hoverBackgroundColor: [ "#ff5A5e", "#5ad3d1", "#ffc870" ], data: [20, 30, 40], }] }, }); </script> </body> </html>

###試したこと
Click events on Pie Charts in Chart.js
こちらを参考に同じ形で動きを試しましたが、canvasタグ内全てでクリック反応が返ってきてしまいました
(追記)試したのは上記のページのこの部分を使わせていただきました。

var ctx = document.getElementById("chart-area").getContext("2d"); var chart = new Chart(ctx, config); document.getElementById("chart-area").onclick = function(evt) { var activePoints = chart.getElementsAtEvent(evt); if(activePoints.length > 0) { //get the internal index of slice in pie chart var clickedElementindex = activePoints[0]["_index"]; //get specific label by index var label = chart.data.labels[clickedElementindex]; //get value by index var value = chart.data.datasets[0].data[clickedElementindex]; /* other stuff that requires slice's label and value */ } }

var myPieChart = new Chart(ctx, {});
の後からdocument.getElementById
と続く形で入れたところ、canvas範囲内でクリックした数だけ「ReferenceError: chart is not defined」が出たのを確認しました。

###補足情報(言語/FW/ツール等のバージョンなど)
Chart.jsは2.2.0を使用しています

初投稿でChart.jsを触るのも今回が初めてですが、なんとか実現させたいです。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/09/09 13:31

試されたコードも追記されたほうが回答を得やすいと思います。
guest

回答1

0

ベストアンサー

書いておられるコードで問題なくクリックイベントを採れています。

JavaScript

1var ctx = document.getElementById( 'chart-area' ).getContext( '2d' ); 2var myPieChart = new Chart(ctx, { 3 type: 'pie', 4 data: { 5 labels : [ 'Red', 'Green', 'Yellow' ], 6 datasets: [ { 7 backgroundColor: [ 8 '#f7464a', 9 '#46bfbd', 10 '#fdb45c' 11 ], 12 hoverBackgroundColor: [ 13 '#ff5A5e', 14 '#5ad3d1', 15 '#ffc870' 16 ], 17 data: [ 20, 30, 40 ] 18 } ] 19 } 20}); 21document.getElementById( 'chart-area' ).onclick = function( evt ) { 22 var activePoints = myPieChart.getElementsAtEvent( evt ); 23 if ( activePoints.length > 0 ) { 24 //get the internal index of slice in pie chart 25 var clickedElementindex = activePoints[ 0 ][ '_index' ]; 26 27 //get specific label by index 28 var label = myPieChart.data.labels[ clickedElementindex ]; 29 30 //get value by index 31 var value = myPieChart.data.datasets[ 0 ].data[ clickedElementindex ]; 32 33 console.log( clickedElementindex ); 34 console.log( label ); 35 console.log( value ); 36 /* other stuff that requires slice's label and value */ 37 } 38} 39```**動くサンプル:**[https://jsfiddle.net/fbtvqvd6/](https://jsfiddle.net/fbtvqvd6/) 40 41--- 42 43クリックしたらデベロッパーツールのコンソールに値が表示されるのが確認できると思います。 44 45【Chrome デベロッパーツールの使い方概要 | Web Tips】 46[http://weback.net/utility/1410/](http://weback.net/utility/1410/)

投稿2016/09/09 17:34

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kurotobi

2016/09/09 23:39

ご回答ありがとうございます。サンプルも用意していただきとても分かりやすかったです。 重ねての質問となってしまい申し訳ないのですが、console.log( label )で取得できた"Red", "Green", "Yellow"をもとに「"Red"取得範囲をクリックでAの動き(例えばアラート)、"Green"取得範囲をクリックでBの動き(アラート)…」ということは可能でしょうか? よろしければご教示いただけないでしょうか。
kei344

2016/09/10 03:26

if ( label === 'Red' ) { } else if ( label === 'Green' ) { } else if ( label === 'Yellow' ) { } こういうことですか?
kurotobi

2016/09/10 04:14

引き続きご回答していただきありがとうございます。 そちらの表記で実行したところ実現したいと考えていた動きになり、モーダルウィンドウの表示まで完成させることが出来ました! 1から最後まで聞いてしまう形になってしまい、お手数をお掛けしました…。本当にありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問