閲覧ありがとうございます。
###前提・実現したいこと
以下のサイトを参考にGooglechartのtooltipから文字列('$600K in our first year!'や'Sunspot activity made this our best year ever!')を表示することが出来ました。
参考URL→https://developers.google.com/chart/interactive/docs/customizing_tooltip_content
php
1<html> 2 <head> 3 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 4 <script type="text/javascript"> 5 google.charts.load('current', {'packages':['corechart']}); 6 google.charts.setOnLoadCallback(drawChart); 7 8 function drawChart() { 9 var dataTable = new google.visualization.DataTable(); 10 dataTable.addColumn('string', 'Year'); 11 dataTable.addColumn('number', 'Sales'); 12 // A column for custom tooltip content 13 dataTable.addColumn({type: 'string', role: 'style'}); 14 dataTable.addColumn({type: 'string', role: 'tooltip'}); 15 16 17 dataTable.addRows([ 18 ['2010', 600, 'stroke-color:#3366cc', '$600K in our first year!'], 19 ['2011', 1500, 'stroke-color:#3366cc', 'Sunspot activity made this our best year ever!'], 20 ['2012', 800, 'stroke-color:#3366cc', '$800K in 2012.'], 21 ['2013', 1000, 'stroke-color:#3366cc', '$1M in sales last year.'] 22 ]); 23 24 var options = { 25 tooltip: {isHtml: true}, 26 legend: 'none', 27 bar: {groupWidth: "100%"} 28 29 }; 30 var chart = new google.visualization.ColumnChart(document.getElementById('col_chart_html_tooltip')); 31 chart.draw(dataTable, options); 32 } 33 </script> 34 </head> 35 <body> 36 <!-- The next line rotates HTML tooltips by 30 degrees clockwise. --> 37 38 <!-- <style>div.google-visualization-tooltip { transform: rotate(30deg); }</style> --> <!--この行でToolTipを30度傾けてる--> 39 40 <div id="col_chart_html_tooltip" style="width: 400px; height: 400px;"></div> 41 </body> 42</html> 43
そして、「その文字列を、項目をクリックすると折りたたまれたフォームが展開されそこに文字列を表示できるようにしたい」というのが実現したいことです。
それについて以下のサイトを参考に折りたたみのやり方はわかりました。
[http://fukafuka295.jp/hp/hp_no10.html]
ですが、それをtooltip内に実装するにあたって上手く組み込む方法が色々試しましたが上手くいきませんでした...。
分かる方いましたらどうかご教示くださいm(_ _)m
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/06 20:13
2016/12/06 20:39
2016/12/07 06:40