Question

使用Google Charts（尚未迁移到Material图表），可以使用func Jump(angle: CGFloat, strength: CGFloat) { if (Ready == true) { var rangle:CGFloat = angle * CGFloat(M_PI / 180) var translate:CGPoint = CGPoint(x: 1, y: 0) var vx:CGFloat = ((translate.x * cos(rangle)) - (translate.y * sin(angle))) var vy:CGFloat = ((translate.y * cos(rangle)) + (translate.x * sin(rangle))) vx *= width vy *= height vx *= (strength) vy *= (strength) vx /= 4000 vy /= 4000 print("Applying Impulse VX: ") print(vx) print(" , VY: ") print(vy) println(" )") var velx = Cavity.physicsBody?.velocity.dx var vely = Cavity.physicsBody?.velocity.dy Cavity.physicsBody?.velocity = CGVector(dx: CGFloat(velx!) / 2, dy: CGFloat(vely!) / 2) Cavity.physicsBody?.applyImpulse(CGVectorMake(vx, vy)) //Cavity.physicsBody?.applyImpulse(CGVectorMake(1000 / width, 1000 / height)) } }选项使工具提示需要点击。但是，使用此工具提示无法解除，除非用户点击图表中的其他数据点 - 他们无法点击任何地方。

有没有一种方法可以让工具提示在点击工具提示之外的任何地方时解散？这种方式更加流畅。

Answer 1

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

示例

＆＃13;
＆＃13;
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); }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

我能够得到类似的东西：当你点击时不要让工具提示消失，而是当你点击工具提示时自己。也许你可以在工具提示中添加一个关闭按钮。

首先，它必须是一个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);
});

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

Answer 3

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

样式基于Google Maps信息框显示的x

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

请注意，我对工具提示（适用于触摸屏）和x按钮都具有关闭操作（对于鼠标用户），并且该按钮具有悬停效果，这与地图信息框也一样（地图信息框似乎未关闭）只需按一下x按钮即可）

我在onChartSelection中的回调是导致通过API在图表上的setSelection似乎未触发选择事件，只有手动操作会触发。这样一来，我就在悬停时进行选择，就好像用户单击了数据点，并且工具提示立即显示并持续存在（例如“ tooltip.trigger”的“选择”和“焦点”组合模式，而Google并不是这样）。开箱即用）

Google Charts / Visualization - 点击即可关闭工具提示

3 个答案: