Как показать две разные всплывающие подсказки в Google Chart - PullRequest
Новая
       34

Как показать две разные всплывающие подсказки в Google Chart

0 голосов
/ 10 июля 2019

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

Как я могу это решить?

Я прошел по следующим ссылкам, но не смог решить.

Отображение нескольких подсказок в Google Charts

Google диаграммы, чтобы показать несколько всплывающих подсказок

Как программно показать / скрыть всплывающую подсказку Google-диаграммы?

Всплывающая подсказка отображается только в «клике» - диаграммы Google

1 Ответ

1 голос
/ 10 июля 2019

из коробки, Google Chart не предлагает эту функцию.

вам нужно будет отключить всплывающие подсказки по умолчанию, 

tooltip: {
  trigger: 'none'
}

и добавьте свои собственные подсказки.
Вы можете использовать события графика, чтобы определить, какую подсказку показывать.
('select', 'onmouseover', 'onmouseout')

для размещения настраиваемой подсказки,
Вы можете использовать метод диаграммы -> getChartLayoutInterface
интерфейс имеет метод для -> getBoundingBox
которая возвращает позицию элемента диаграммы,
просто передайте идентификатор элемента, например столбец диаграммы.

Идентификаторы столбца диаграммы принимают форму -> bar#0#0
где первый 0 номер серии,
а второй 0 - номер строки.

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

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['City', '2010 Population',],
    ['New York City, NY', 8175000],
    ['Los Angeles, CA', 3792000],
    ['Chicago, IL', 2695000],
    ['Houston, TX', 2099000],
    ['Philadelphia, PA', 1526000]
  ]);

  var options = {
    title: 'Population of Largest U.S. Cities',
    chartArea: {width: '50%'},
    hAxis: {
      title: 'Total Population',
      minValue: 0
    },
    vAxis: {
      title: 'City'
    },
    tooltip: {
      trigger: 'none'
    }
  };

  var chart = new google.visualization.ColumnChart($('#chart_div').get(0));
  var chartLayout;
  var selection;

  google.visualization.events.addListener(chart, 'ready', function () {
    chartLayout = chart.getChartLayoutInterface();
  });

  google.visualization.events.addListener(chart, 'select', function () {
    selection = getSelection();
    if (selection.row !== null) {
      hideTooltip('tooltip-hover');
      showTooltip(selection, 'tooltip-select');
    } else {
      hideTooltip('tooltip-select');
    }
  });

  google.visualization.events.addListener(chart, 'onmouseover', function (sender) {
    selection = getSelection();
    if ((sender.row !== null) && (selection.row !== sender.row)) {
      showTooltip(sender, 'tooltip-hover');
    }
  });

  google.visualization.events.addListener(chart, 'onmouseout', function (sender) {
    selection = getSelection();
    if ((sender.row !== null) && (selection.row !== sender.row)) {
      hideTooltip('tooltip-hover');
    }
  });

  function showTooltip(sender, tooltip) {
    // get position of bar
    var tooltipBounds = chartLayout.getBoundingBox('bar#' + (sender.column - 1) + '#' + sender.row);

    // set values
    $('#' + tooltip + ' .series-name').html(data.getColumnLabel(sender.column));
    $('#' + tooltip + ' .series-x').html(data.getFormattedValue(sender.row, 0));
    $('#' + tooltip + ' .series-y').html(data.getFormattedValue(sender.row, sender.column));

    // set position
    $('#' + tooltip).css({
      left: tooltipBounds.left + 'px',
      top: (tooltipBounds.top - $('#' + tooltip).outerHeight(true)) + 'px'
    });

    // show
    $('#' + tooltip).addClass('shown');
    $('#' + tooltip).removeClass('hidden');
  }

  function hideTooltip(tooltip) {
    // hide
    $('#' + tooltip).addClass('hidden');
    $('#' + tooltip).removeClass('shown');
  }

  function getSelection() {
    selection = chart.getSelection();
    if (selection.length > 0) {
      return selection[0];
    } else {
      return {row: null, column: null};
    }
  }

  chart.draw(data, options);
});
.ggl-tooltip {
  background-color: #ffffff;
  border: 1px solid #E0E0E0;
  font-size: 10pt;
  padding: 8px 8px 8px 8px;
  position: absolute;
}

.ggl-tooltip div {
  margin-top: 4px;
}

.bold {
  font-weight: bold;
}

.hidden {
  display: none;
  visibility: hidden;
}

.shown {
  display: inline-block;
}

#tooltip-hover {
  color: blue;
}

#tooltip-select {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://www.gstatic.com/charts/loader.js'></script>
<div id="chart_div"></div>
<div id="tooltip-hover" class="ggl-tooltip hidden">
  <div><span class="series-name bold"></span></div>
  <div>
    <span class="series-x bold"></span>:
    <span class="series-y"></span>
  </div>
</div>
<div id="tooltip-select" class="ggl-tooltip hidden">
  <div><span class="series-name bold"></span></div>
  <div>
    <span class="series-x bold"></span>:
    <span class="series-y"></span>
  </div>
</div>
...