пузырьковая диаграмма Google как добавить всплывающую подсказку HTML

У меня есть диаграмма Google: пузырьковая диаграмма. Я хочу добавить настраиваемую всплывающую подсказку HTML с указанным значением относительно точки:

<div class="clearfix>
     <h3>Metric: []</h3>
     <h4>ID comes here: []</h4>
     <h4>X Axis Value comes here: []</h4>
     <h4>Y Axis Value comes here: []</h4>
     <h4>Volume comes here: []</h4>
</div>

В настоящее время он показывает всплывающую подсказку по умолчанию, которая расположена не так, как я хочу. И я тоже не могу редактировать поля.

Я хочу использовать всплывающую подсказку Custom HTML, но, к сожалению, она пока не поддерживается диаграммами Google в пузырьковой диаграмме.

введите описание изображения здесь

Любым способом добиться того же.

МОЙ КОД

Демонстрация JSFIDDLE

<html>
<head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", {
            packages: ["corechart"]
        });
        google.setOnLoadCallback(drawChart);

        function drawChart() {
            var data = google.visualization.arrayToDataTable([
["ID", "X Axis Value", "Y Axis Value", "Metric", "Volume"],
["Range: 2-5", 3, 2.5, "Value Provider", 300],
["Range: 2-5", 4, 2.5, "Third Provider", 239],
["Range: 3-8", 3, 7.4, "Second Provider", 344],
["Range: 5-8", 5, 7.3, "Value Provider", 324],
["Range: 2-10", 9, 2.32, "Third Provider", 765],
["Range: 2-5", 5, 3, "Value Provider", 342],
]);

            var options = {
                title: 'Range Volume',
                hAxis: {
                    title: 'X Axis'
                },
                vAxis: {
                    title: 'Y Axis'
                },
                bubble: {
                    textStyle: {
                        fontSize: 11,
                                                    color:'transparent'
                    }
                }
            };
            var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
    </script>
</head>

<body>
    <div id="chart_div" style="width: 100%; height: 90vh;"></div>
</body>


charts google-visualization tooltip bubble-chart
person Alex    schedule 30.05.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В основном вам нужен какой-то трекер мыши, чтобы знать, где должна отображаться всплывающая подсказка, и вам нужны два слушателя, например:

google.visualization.events.addListener chart, 'onmouseover', mouseoverHandler
google.visualization.events.addListener chart, 'onmouseout', mouseoutHandler

и вы должны добавить id='tooltip' в свою всплывающую подсказку с помощью css, например:

#tooltip {
  display: none;
  position: absolute;
  padding: 10px;
  border: 1px solid #ddd;
  background: white;
  width: 350px;
  -webkit-box-shadow: 0 0 5px #ddd;
  -moz-box-shadow: 0 0 5px #ddd;
  box-shadow: 0 0 5px #ddd;
  z-index: 1;
}

javascript:

var $tooltip = $('#tooltip')

mouseoverHandler = function(event) {
  metric = data.getValue(event.row, 3);
  id = data.getValue(event.row, 0);
  xAxis = data.getValue(event.row, 1);
  yAxis = data.getValue(event.row, 2);
  volume = data.getValue(event.row, 4);
  $tooltip.find('h3').append(metric);
  $tooltip.css({
    top: y,
    left: x
  }).show();
};

mouseoutHandler = function() {
  $tooltip.hide();
};

x и y - это шнуры вашей мыши, взятые из какого-то трекера мыши, например: Javascript - отслеживание положения мыши.

title = data.getValue(event.row, 3); - это строка, в которой вы берете данные из своей диаграммы, и вы должны вставить эти данные в всплывающую подсказку так, как вы хотите, чтобы они были вставлены. Надеюсь, это поможет.

person Szymon    schedule 30.05.2016
comment
Это не объясняет, как мне получить данные по строкам, столбцам, которые вы получаете, - это просто заголовок - person Alex; 30.05.2016
comment
Теперь он должен показать, как это сделать со всеми вашими столбцами. Я отредактировал свой ответ. - person Szymon; 30.05.2016