Javascript 谷歌图表/可视化-点击关闭工具提示

使用Google图表（尚未迁移到材质图表），可以通过使用

{trigger:'selection'}

选项，使工具提示需要单击。但是，如果用户不单击图表中的另一个数据点，则无法取消使用此工具提示-他们不能只单击任何位置

---

有没有办法使工具提示在所述工具提示之外的任何位置被单击时自动解除？这样会更流畅。

您可以为

主体

元素附加一个

单击

事件处理程序，以清除图表的选择，如下所示：

示例

google.setOnLoadCallback（绘图图）；
var图；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[‘年’、‘固定’]，
['2015', 80],
['2016', 90],
['2017', 100],
['2018', 90],
['2019', 80], ]);
变量选项={
工具提示：{
伊什特尔：没错，
触发器：“选择”
},
图例：{
位置：“无”
},
酒吧：{
groupWidth:'90%'
},
颜色：['#A61D4C']，
启用交互：true
};
chart=新的google.visualization.ColumnChart（document.getElementById（'tooltip_'）；
图表绘制（数据、选项）；
addEvent（document.querySelector（'body'），'click'，clearSelection）；
}
选举职能（e）{
如果（！document.querySelector（'#tooltip_'）。包含（e.srcElement））{
chart.setSelection（）；
}
}
函数addEvent（元素、evnt、funct）{
if（元素附件）
返回元素.attachEvent（'on'+evnt，funct）；
其他的
返回元素.addEventListener（evnt、funct、false）；
}

---

我得到了类似于工作的东西：当你点击离开时，工具提示不会消失，而是当你点击工具提示时消失。也许可以在工具提示中添加“关闭”按钮

首先，它必须是一个html工具提示：

tooltip: { isHtml: true }

然后，必须在传递给图表的字符串html中添加以下内容（假设使用jQuery）：

---

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

根据Dennis2000的回答，我这样做了：

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

这些样式基于谷歌地图信息框显示的x

注意工具提示中的两个侦听器（我不想清除悬停时的选择，而是重新选择悬停点）和“onClick”属性

请注意，我在工具提示（对触摸屏有用）和鼠标用户的x按钮上都有关闭操作，在该按钮上有悬停效果，就像“地图信息框”一样（顺便说一句，“地图信息框”似乎不会在触摸时关闭，只是用x按钮）

---

我在onChartSelection中的回调是因为通过API在图表上的setSelection似乎不会触发选择事件，只有手动操作才会触发选择事件。就像我在悬停时做选择一样，如果用户点击了数据点，工具提示会立即显示并持续（就像“tooltip.trigger”的组合“selection”和“focus”模式，Google不会提供现成的）

-点击图表栏，它会显示工具提示。现在单击“离开”，除非再次单击同一图表栏，否则它不会消失。代码段无法按预期工作。它曾经有用，现在不再有用了。GoogleCharts API是否发生了变化，使您的答案不再适用？您是否可以分享您的代码。我正在研究谷歌气泡图，当selectionMode设置为multiple时，我也面临同样的问题。理想情况下，工具提示应在选定气泡后出现，并且仅在悬停时出现

google.visualization.events.addListener(chart, "onmouseover", function(event){
      chart.setSelection(null);
});

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