###前提・実現したいこと
GoogleChartを使用し、棒グラフを表示させることは出来ました。
実現させたいこととしては、棒グラフの棒をクリックしたときに値ごとにアラートを表示するなど、何らかのアクションを起こしたいです。
とりあえず簡単な棒グラフから、棒をクリックするとアラートを表示することは出来ました。
しかし、どこの棒をクリックしてもスイッチは同じ?で、それぞれの棒としての区別(独立)出来ていない状態なので、どのようにソース文を変えれば各棒に対応したクリック処理を付与できますか?
文章がわかりづらくてすみません。わかる方いましたらお願いします..
###該当のソースコード
php
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<title></title> 5 6<script type="text/javascript" src="https://www.google.com/jsapi"></script> 7<script type="text/javascript"> 8 9// Load the Visualization API and the piechart package. 10google.load('visualization', '1.0', {'packages':['corechart']}); 11 12// Set a callback to run when the Google Visualization API is loaded. 13google.setOnLoadCallback(drawChart); 14 15// Callback that creates and populates a data table, 16// instantiates the pie chart, passes in the data and 17// draws it. 18function drawChart() { 19 20 // Create the data table. 21 var data = new google.visualization.DataTable(); 22 data.addColumn('string', 'Topping'); 23 data.addColumn('number', 'Slices'); 24 data.addRows([ 25 ['Mushrooms', 3], 26 ['Onions', 1], 27 ['Olives', 1], 28 ['Zucchini', 1], 29 ['Pepperoni', 2] 30 ]); 31 32 // Set chart options 33 var options = {'title':'How Much Pizza I Ate Last Night', 34 'width':400, 35 'height':300}; 36 37 // Instantiate and draw our chart, passing in some options. 38 var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 39 40 function selectHandler() { 41 var selectedItem = chart.getSelection()[0]; 42 if(selectedItem) { 43 var value = data.getValue(selectedItem.row, selectedItem.column); 44 alert('The user selected'); 45 } 46 } 47 48 google.visualization.events.addListener(chart, 'select', selectHandler); 49 chart.draw(data, options); 50} 51 52</script> 53 54</head> 55<body> 56<div id="chart_div" style="width: 900px; height: 500px"></div> 57</body> 58</html>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/01/02 06:37