使用Google Charts(还没有迁移到Material Charts),用户可以通过{trigger: 'selection'}选项使工具提示需要点击。但是,使用此选项时,除非用户点击图表中的另一个数据点,否则工具提示无法关闭-他们不能随便点击任何地方。有没有一种方法可以使它的工具提示解散时,任何地方以外说,工具提示被点击?有点更流体的方式。
{trigger: 'selection'}
wecizke31#
您可以为body元素附加click事件处理程序,以清除图表的选择,如下所示:
body
click
google.setOnLoadCallback(drawChart); var chart; function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Fixations'], ['2015', 80], ['2016', 90], ['2017', 100], ['2018', 90], ['2019', 80], ]); var options = { tooltip: { isHtml: true, trigger: 'selection' }, legend: { position: 'none' }, bar: { groupWidth: '90%' }, colors: ['#A61D4C'], enableInteractivity: true }; chart = new google.visualization.ColumnChart(document.getElementById('tooltip_rotated')); chart.draw(data, options); addEvent(document.querySelector('body'),'click',clearSelection); } function clearSelection (e) { if (!document.querySelector('#tooltip_rotated').contains(e.srcElement)) { chart.setSelection(); } } function addEvent(element, evnt, funct){ if (element.attachEvent) return element.attachEvent('on'+evnt, funct); else return element.addEventListener(evnt, funct, false); }
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script> <div id="tooltip_rotated" style="width: 400px; height: 400px;"></div>
2eafrhcq2#
我能够得到一些类似的工作:不要让工具提示在你点击离开的时候消失,而是当你点击工具提示本身的时候。也许你可以在工具提示上加一个关闭按钮。首先,它必须是一个html工具提示:
tooltip: { isHtml: true }
然后,您必须在传递给图表的字符串html中的某个位置添加以下内容(假设使用jQuery):
$("<div></div>").attr("onclick", "$(this).closest('.google-visualization-tooltip').hide()")
或者如果你不使用jQuery的话,类似的方法,这似乎只适用于你传递给工具提示的html内容的内部div,所以这需要是一个子div。此外,还需要将以下事件处理程序添加到图表中:
google.visualization.events.addListener(chart, "onmouseover", function(event){ chart.setSelection(null); });
否则,当您悬停图表时,工具提示将重新弹出。
bkhjykvo3#
根据dennisr2000的答案,我做了以下操作:
function onChartSelection(e) { var selection = chart.getSelection([e]); //note: if currently selected datapoint is clicked, selection is emptied ([] received) var dataPointIndex = (selection.length != 0)? selection[0].row : -1; //using -1 for deselection if (_chartSelectionChangedCallback != null) _chartSelectionChangedCallback(dataPointIndex); } function plotElevationsDistances(elevations, distances, selectionCallback) { //console.log('elevations: ', JSON.stringify(elevations)); //console.log('distances: ', JSON.stringify(distances)); chart = //new google.visualization.ColumnChart(document.getElementById('chart_div')); /**/new google.visualization.LineChart(document.getElementById('chart_div')); // Add data selection handler: google.visualization.events.addListener(chart, 'select', onChartSelection); google.visualization.events.addListener(chart, 'onmouseover', function(e){ chart.setSelection([{row: e.row, column: e.column}]); onChartSelection(e); }); var data = new google.visualization.DataTable(); //data.addColumn('string', '# Marker'); /**/data.addColumn('number', 'Distance (km)'); data.addColumn('number', 'Elevation (m)'); data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}}); var elevationCount = elevations.length; for (var i = 0; i < elevationCount; i++) data.addRow([ /*''*/distances[i], elevations[i], '<div class="chartTooltip" onClick="$(this).closest(\'.google-visualization-tooltip\').hide()">Distance: <strong>' + distances[i] + ' km</strong><br />Elevation: <strong>' + elevations[i] + ' m</strong></div><div class="chartTooltipCloseBtn" onClick="$(this).closest(\'.google-visualization-tooltip\').hide()" draggable="false" title="Close" aria-label="Close" type="button" onClick ><img class="chartTooltipCloseBtnImg" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000000%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%3C%2Fsvg%3E%0A"></button>' ]); chart.draw(data, chartOptions); }
结合了这些风格:
.chartTooltip { margin:10px; text-align: left; } .chartTooltipCloseBtn { background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; display: block; border: 0px none; margin: 0px; padding: 0px; position: absolute; cursor: pointer; -moz-user-select: none; top: -6px; right: -6px; width: 30px; height: 30px; outline: currentcolor none medium; opacity: 0.6; } .chartTooltipCloseBtn:hover { opacity: 1; } .chartTooltipCloseBtnImg { .pointer-events: none; display: block; width: 14px; height: 14px; margin: 8px; }
样式基于GoogleMap信息框中显示的x注意工具提示中的两个侦听器(我不想清除悬停时的选择,而是重新选择悬停点)和“onClick”属性。请注意,我有两个工具提示关闭行动(有用的触摸屏)和鼠标用户的x按钮与悬停效果的按钮,因为Map信息框也没有(Map信息框似乎不关闭触摸btw,只是与x按钮)我在onChartSelection中的回调是因为通过API在图表上的setSelection似乎没有触发选择事件,只有手动操作才能触发。因此,我在悬停时进行选择,就像用户点击了数据点一样,工具提示立即显示并持续存在(就像“tooltip.trigger”的“选择”和“焦点”组合模式,Google没有提供开箱即用的功能)
cwdobuhd4#
2023年4月有效的一行程序,在调用lineChart.draw()之前插入
lineChart.draw()
google.visualization.events.addListener(lineChart, 'ready', (chart) => chart.container.addEventListener('click', () => chart.container.querySelector('.google-visualization-tooltip') ? chart.setSelection() : 0))
lineChart
chart
4条答案
按热度按时间wecizke31#
您可以为
body
元素附加click
事件处理程序,以清除图表的选择,如下所示:2eafrhcq2#
我能够得到一些类似的工作:不要让工具提示在你点击离开的时候消失,而是当你点击工具提示本身的时候。也许你可以在工具提示上加一个关闭按钮。
首先,它必须是一个html工具提示:
然后,您必须在传递给图表的字符串html中的某个位置添加以下内容(假设使用jQuery):
或者如果你不使用jQuery的话,类似的方法,这似乎只适用于你传递给工具提示的html内容的内部div,所以这需要是一个子div。
此外,还需要将以下事件处理程序添加到图表中:
否则,当您悬停图表时,工具提示将重新弹出。
bkhjykvo3#
根据dennisr2000的答案,我做了以下操作:
结合了这些风格:
样式基于GoogleMap信息框中显示的x
注意工具提示中的两个侦听器(我不想清除悬停时的选择,而是重新选择悬停点)和“onClick”属性。
请注意,我有两个工具提示关闭行动(有用的触摸屏)和鼠标用户的x按钮与悬停效果的按钮,因为Map信息框也没有(Map信息框似乎不关闭触摸btw,只是与x按钮)
我在onChartSelection中的回调是因为通过API在图表上的setSelection似乎没有触发选择事件,只有手动操作才能触发。因此,我在悬停时进行选择,就像用户点击了数据点一样,工具提示立即显示并持续存在(就像“tooltip.trigger”的“选择”和“焦点”组合模式,Google没有提供开箱即用的功能)
cwdobuhd4#
2023年4月
有效的一行程序,在调用
lineChart.draw()
之前插入lineChart
以匹配图表的名称,但chart
保持不变 *