谷歌图表/可视化 - 点击离开工具提示 [英] Google Charts/Visualization - dismiss tooltip on click away

问题描述

使用Google Charts（尚未迁移到Material Charts），可以使用 {trigger：'selection'} 选项使工具提示点击。然而，使用这个工具提示不能被解雇，除非用户点击图表中的另一个数据点 - 他们不能在任何地方点击。

有没有办法做到这一点所以工具提示会在点击工具提示之外的任何地方时解散？

解决方案

您可以附加点击事件 body 元素的处理程序可清除图表的选择，如下所示：

示例

  google.setOnLoadCallback（drawChart）; var chart; function drawChart（）{var data = google.visualization.arrayToDataTable（[['Year' '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（数据，选项）; 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）;否则返回element.addEventListener（evnt，funct，false）;}  

< script type =text / javascriptsrc =https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1 '，'packages'：['corechart']}]}>< / script>< div id =tooltip_rotatedstyle =width：400px; height：400px;>< / div> / code>

Using Google Charts (haven't migrated to the Material ones yet), one can make tooltips require a click by using the {trigger: 'selection'} option. However, using this the tooltip cannot be dismissed unless the user clicks another data point in the chart - they can't just click anywhere.

Is there a way to make it so the tooltip dismisses when anywhere outside said tooltip is clicked? Little more fluid that way.

解决方案

You could attach a click event handler for the body element to clear the chart's selection as demonstrated below:

Example

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>

这篇关于谷歌图表/可视化 - 点击离开工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！