將小的自定義圖標和彈出窗口添加到Google圖表標題中

Question

我正在使用Google的柱狀圖和條形圖https://developers.google.com/chart/interactive/docs/gallery/

除了一件事情，一切都很好：我想在圖表標題旁邊添加一個小的“ i”圖標。 當我單擊鼠標或將鼠標移到其上時，將出現一個自定義彈出窗口，其中包含一些信息。

讓我們以這個例子為例：https://developers.google.com/chart/interactive/docs/gallery/columnchart

 var options = {
    title: 'Motivation and Energy Level Throughout the Day',

我希望該圖標和彈出窗口顯示在標題“ ... the Day”結束之后

我已經閱讀了文檔，但沒有發現任何東西。 有辦法實現嗎？

PS或也許有一種方法可以得到類似的結果，即將i-icon放在圖表上的其他位置？ 但是它應該與整個圖表有關。

Answer 1

您可以使用疊加層在圖表上放置“信息”圖標

然后在懸停圖標時使用css顯示“工具提示”

請參閱以下工作片段，
疊加層放置在圖表的'ready'事件中

 google.charts.load('current', { packages: ['controls', 'corechart', 'table'] }).then(function () { var data = new google.visualization.DataTable(); data.addColumn('timeofday', 'Time of Day'); data.addColumn('number', 'Motivation Level'); data.addRows([ [{v: [8, 0, 0], f: '8 am'}, 1], [{v: [9, 0, 0], f: '9 am'}, 2], [{v: [10, 0, 0], f:'10 am'}, 3], [{v: [11, 0, 0], f: '11 am'}, 4], [{v: [12, 0, 0], f: '12 pm'}, 5], [{v: [13, 0, 0], f: '1 pm'}, 6], [{v: [14, 0, 0], f: '2 pm'}, 7], [{v: [15, 0, 0], f: '3 pm'}, 8], [{v: [16, 0, 0], f: '4 pm'}, 9], [{v: [17, 0, 0], f: '5 pm'}, 10], ]); var options = { hAxis: { title: 'Time of Day', format: 'h:mm a', viewWindow: { min: [7, 30, 0], max: [17, 30, 0] } }, legend: { alignment: 'end', position: 'bottom' }, title: 'Motivation and Energy Level Throughout the Day', vAxis: { title: 'Rating (scale of 1-10)', ticks: [ {v: 8.5, f: 'A'}, {v: 4.5, f: 'B'}, {v: 2, f: 'C'} ] } }; var container = document.getElementById('chart'); var chart = new google.visualization.ColumnChart(container); google.visualization.events.addListener(chart, 'ready', function () { var chartLayout = chart.getChartLayoutInterface(); var chartPosition = $('#chart').position(); var titleLeft = 24; var titlePosition = chartLayout.getBoundingBox('title'); $('#chart-overlay').css({ left: (chartPosition.left + titlePosition.left - titleLeft) + 'px', top: (chartPosition.top + titlePosition.top) + 'px' }).removeClass('hidden'); }); chart.draw(data, options); }); 

 .hidden { display: none; visibility: hidden; } .overlay { position: absolute; z-index: 1; } .overlay:hover .popup { display: inline-block; } .popup { background-color: #fff9c4; border: 1px solid #ffd54f; display: none; padding: 6px; } .popup span { font-weight: bold; } 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <div class="hidden overlay" id="chart-overlay"> <div> <img alt="Information" src="http://findicons.com/files/icons/2166/oxygen/16/dialog_information.png" /> </div> <div class="popup"> <div> <span>Information:</span> </div> <div> This is the information for the tooltip... </div> </div> </div> <div id="chart"></div>