tooltip内の文字を、折りたたみメニューで表示する方法について

閲覧ありがとうございます。
###前提・実現したいこと
以下のサイトを参考に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件

ベストアンサー

マニュアルのとおり、以下の２点をやればtooltipでHTMLを書けると思います。

javascript
1tooltip.isHtml: true
2dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}})

ただし、これだとtooltipにクリックできないので、以下のようにtriggerをbothにするといいみたいです。

javascript
1tooltip: {
2    isHtml: true,
3    trigger: 'both'
4}

軽く動くサンプルを作ったので載せておきます

html
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', 'p':{html:true}});
15
16        var test1 = "文字列テスト";
17        var html = '<div onclick="obj=document.getElementById(\'open\').style; obj.display=(obj.display==\'none\')?\'block\':\'none\';"><a style="cursor:pointer;">▼ クリックで展開</a></div><div id="open" style="display:none;clear:both;">'+test1+'</div>';
18
19        dataTable.addRows([
20          ['2010', 600, 'stroke-color:#3366cc', html],
21          ['2011', 1500, 'stroke-color:#3366cc', 'Sunspot activity made this our best year ever!'],
22          ['2012', 800, 'stroke-color:#3366cc', '$800K in 2012.'],
23          ['2013', 1000, 'stroke-color:#3366cc', '$1M in sales last year.']
24        ]);
25
26        var options = {
27          tooltip: {isHtml: true, trigger: 'both'},
28          legend: 'none',
29          bar: {groupWidth: "100%"}
30
31        };
32        var chart = new google.visualization.ColumnChart(document.getElementById('col_chart_html_tooltip'));
33        chart.draw(dataTable, options);
34      }
35    </script>
36  </head>
37  <body>
38    <!-- The next line rotates HTML tooltips by 30 degrees clockwise. -->
39
40    <!-- <style>div.google-visualization-tooltip { transform: rotate(30deg); }</style> --> <!--この行でToolTipを30度傾けてる-->
41
42    <div id="col_chart_html_tooltip" style="width: 400px; height: 400px;"></div>
43  </body>
44</html>
45コード

投稿2016/12/06 12:47

総合スコア6586

2016/12/06 20:13

回答と、サンプルまでご提示していただき本当にありがとうございます！すみません。あと１点ですが、変数に入れた文字列を先ほどの展開フォームに組み込んで表示したいときはどのように表記すればいいのでしょうか... var test1 = "文字列テスト"; '<div onclick="obj=document.getElementById(\'open\').style; obj.display=(obj.display==\'none\')?\'block\':\'none\';"><a style="cursor:pointer;">▼ クリックで展開</a></div><div id="open" style="display:none;clear:both;">`${test1}`</div>'; このように書いても結果からは変数の中身ではなく`${test1}`がそのまま表示されてしまいます。もしよろしければ助けていただけると幸いです。