Google 图表折线图：工具提示 Hitbox

Question

我使用谷歌图表库创建了这个折线图。 一旦用户靠近线路（例如在红色圆圈中），我希望显示工具提示。现在只有当我将鼠标直接移动到该点时它才会弹出。有没有办法放大“hitbox”？

Answer 1

谷歌图表不提供增加“hitbox”的选项

但它们确实提供了我们可以用来添加我们自己的自定义命中框的方法

基本上，我们必须自己跟踪鼠标并确定鼠标是否在我们预定义的范围内
如果在范围内找到，则我们选择该点以便显示工具提示
因此，我们必须添加以下选项，
允许在“悬停”和“选择”时显示工具提示

tooltip: {
  trigger: 'both'
}

在下面的粗略示例中，我将命中范围设置为...

x 轴值的 10%
y轴值的40%

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['controls', 'corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y'],
    [10, 15],
    [15, 13],
    [18, 20],
    [24, 26],
    [34, 30],
    [40, 43],
    [49, 48],
    [50, 55],
    [65, 67],
    [70, 70],
    [72, 70],
    [73, 70],
    [80, 85]
  ]);

  var options = {
    chartArea: {
      height: '100%',
      width: '100%',
      top: 32,
      left: 32,
      right: 16,
      bottom: 32
    },
    height: '100%',
    width: '100%',
    legend: {
      position: 'top'
    },
    selectionMode: 'multiple',
    tooltip: {
      trigger: 'both'
    }
  };

  // create chart
  var container = document.getElementById('chart');
  var chart = new google.visualization.LineChart(container);

  // set hit range
  var xHitRange = 0.10;  // 10% of x-axis
  var yHitRange = 0.40;  // 40% of y-axis

  // wait for chart to draw
  google.visualization.events.addListener(chart, 'ready', function () {
    // get chart layout
    var chartLayout = chart.getChartLayoutInterface();

    // get chart bounds
    var chartBounds = container.getBoundingClientRect();

    // listen for mouse move
    window.addEventListener('mousemove', function (e) {
      var xAxisValue;
      var yAxisValue;

      // mouse coordinates
      var xCoord = e.pageX;
      var yCoord = e.pageY;

      // clear currect selection
      chart.setSelection([]);

      // determine if mouse is within chart area
      if ((xCoord >= chartBounds.left) && (xCoord <= (chartBounds.left + chartBounds.width)) &&
          (yCoord >= chartBounds.top) && (yCoord <= (chartBounds.top + chartBounds.height))) {
        // determine axis values of mouse location
        xAxisValue = chartLayout.getHAxisValue(xCoord - chartBounds.left);
        yAxisValue = chartLayout.getVAxisValue(yCoord - chartBounds.top);

        // find points within the hit range
        var pointsFound = [];
        for (var i = 0; i < data.getNumberOfRows(); i++) {
          var xRowValue = data.getValue(i, 0);
          var yRowValue = data.getValue(i, 1);

          var xRangeMin = xRowValue - (xRowValue * xHitRange);
          var xRangeMax = xRowValue + (xRowValue * xHitRange);

          var yRangeMin = yRowValue - (yRowValue * yHitRange);
          var yRangeMax = yRowValue + (yRowValue * yHitRange);

          if ((xAxisValue >= xRangeMin) && (xAxisValue <= xRangeMax) &&
              (yAxisValue >= yRangeMin) && (yAxisValue <= yRangeMax)) {
            pointsFound.push(i);
          }
        }

        // determine if points were found
        if (pointsFound.length > 0) {
          // find point closest to the mouse
          pointsVariance = [];
          pointsFound.forEach(function (row) {
            var xRowValue = data.getValue(row, 0);
            var yRowValue = data.getValue(row, 1);
            var xVariance = Math.abs(xAxisValue - xRowValue);
            var yVariance = Math.abs(yAxisValue - yRowValue);
            pointsVariance.push(xVariance + yVariance);
          });
          var minVariance = null;
          pointsVariance.forEach(function (variance) {
            minVariance = minVariance || variance;
            minVariance = Math.min(minVariance, variance);
          });

          // show tooltip of closest point
          chart.setSelection([{row: pointsFound[pointsVariance.indexOf(minVariance)], column: 1}]);
        }
      }
    });
  });
  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>