Как google-visualization-tooltip вычисляет левое и верхнее значения? - PullRequest
Новая
       35

Как google-visualization-tooltip вычисляет левое и верхнее значения?

0 голосов
/ 20 февраля 2020

Как google-visualization-tooltip вычисляет левое и верхнее значения стиля? пример - при отладке я вижу, что: - 

<div class="google-visualization-tooltip" style="width: 1px; height: 0px; left: 453.25px; top: 44.91px;"</div>

Как я могу рассчитать это относительно, чтобы подсказка отображалась сверху и была выровнена по центру относительно точки, на которую наведен курсор, независимо от ширины элемент?

1 Ответ

1 голос
/ 20 февраля 2020

большинство графиков в пакете 'corechart',
имеют методы для определения положения различных элементов графика.

сначала получите интерфейс макета диаграммы ... 

var chartLayout = chart.getChartLayoutInterface();

у интерфейса макета есть метод -> getBoundingBox(id)
где id - идентификатор строки диаграммы element.
, чтобы найти положение точки, используйте этот формат для id -> point#series#row - point#0#0

мы можем использовать событие диаграммы onmouseover, чтобы узнать, когда точка была обнаружена,
и показывается всплывающая подсказка.
Событие onmouseover отправляет аргумент со строкой и столбцом из таблицы данных,
о точке, которая отслеживается.

как таковой, мы можем получить макет, найти точку и расположить подсказку. 

google.visualization.events.addListener(chart, 'onmouseover', function (sender) {
  // ensure point is hovered
  if (sender.row !== null) {
    var padding = 16;
    var chartLayout = chart.getChartLayoutInterface();
    var pointBounds = chartLayout.getBoundingBox('point#' + (sender.column - 1) + '#' + sender.row);
    var tooltip = chart.getContainer().getElementsByClassName('google-visualization-tooltip');
    if (tooltip.length > 0) {
      var tooltipBounds = tooltip[0].getBoundingClientRect();
      tooltip[0].style.top = (pointBounds.top - tooltipBounds.height - padding) + 'px';
      tooltip[0].style.left = ((pointBounds.left + (pointBounds.width / 2)) - (tooltipBounds.width  / 2)) + 'px';
    }
  }
});

см. Следующий рабочий фрагмент ... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable({
    "cols": [
      {"label": "x", "type": "number"},
      {"label": "y", "type": "number"}
    ],
    "rows": [
      {"c":[{"v": 2015}, {"v": 1}]},
      {"c":[{"v": 2016}, {"v": 2}]},
      {"c":[{"v": 2017}, {"v": 3}]},
      {"c":[{"v": 2018}, {"v": 4}]},
      {"c":[{"v": 2019}, {"v": 5}]},
      {"c":[{"v": 2020}, {"v": 6}]}
    ]
  });

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

  google.visualization.events.addListener(chart, 'onmouseover', function (sender) {
    // ensure point is hovered
    if (sender.row !== null) {
      var padding = 16;
      var chartLayout = chart.getChartLayoutInterface();
      var pointBounds = chartLayout.getBoundingBox('point#' + (sender.column - 1) + '#' + sender.row);
      var tooltip = chart.getContainer().getElementsByClassName('google-visualization-tooltip');
      if (tooltip.length > 0) {
        var tooltipBounds = tooltip[0].getBoundingClientRect();
        tooltip[0].style.top = (pointBounds.top - tooltipBounds.height - padding) + 'px';
        tooltip[0].style.left = ((pointBounds.left + (pointBounds.width / 2)) - (tooltipBounds.width  / 2)) + 'px';
      }
    }
  });

  var options = {
    chartArea: {
      bottom: 32,
      left: 32,
      right: 32,
      top: 48,
      width: '100%',
      height: '100%'
    },
    hAxis: {
      format: '0',
      ticks: data.getDistinctValues(0)
    },
    legend: {
      position: 'top'
    },
    pointSize: 4,
    tooltip: {
      isHtml: true,
      trigger: 'both'
    }
  };

  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...