javascript – Google图表/可视化 – 点击即可关闭工具提示

2019-10-03 05:37:10 阅读：103 来源： 互联网

使用Google Charts(尚未迁移到Material图表),可以使用{trigger：’selection’}选项让工具提示需要点击.但是,使用此工具提示无法解除,除非用户单击图表中的另一个数据点 – 他们不能单击任何地方.

是否有一种方法可以使工具提示在点击工具提示之外的任何地方时解除？那种方式更流畅.

解决方法:

您可以为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>

标签：javascript,google-visualization
来源： https://codeday.me/bug/20191003/1847019.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – Google图表/可视化 – 点击即可关闭工具提示