javascript Google图表/可视化-点击离开时关闭工具提示

sshcrbum  于 2023-02-07  发布在  Java
关注(0)|答案(4)|浏览(122)

使用Google Charts(还没有迁移到Material Charts),用户可以通过{trigger: 'selection'}选项使工具提示需要点击。但是,使用此选项时,除非用户点击图表中的另一个数据点,否则工具提示无法关闭-他们不能随便点击任何地方。
有没有一种方法可以使它的工具提示解散时,任何地方以外说,工具提示被点击?有点更流体的方式。

wecizke3

wecizke31#

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

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);
});

否则,当您悬停图表时,工具提示将重新弹出。

bkhjykvo

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没有提供开箱即用的功能)

cwdobuhd

cwdobuhd4#

2023年4月
有效的一行程序,在调用lineChart.draw()之前插入

google.visualization.events.addListener(lineChart, 'ready', (chart) =>
    chart.container.addEventListener('click',
        () => chart.container.querySelector('.google-visualization-tooltip')
            ? chart.setSelection() : 0))
  • 更改lineChart以匹配图表的名称,但chart保持不变 *

相关问题