Question

我有一张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>

目前它显示的是默认工具提示，它没有按照我想要的方式排列。我也无法编辑字段。

我想使用自定义HTML工具提示，但遗憾的是，目前泡泡图中的Google图表并不支持它。

任何达到同样目的的方法。

我的代码

JSFIDDLE Demo

<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>

Answer 1

基本上你需要某种鼠标跟踪来知道应该显示工具提示的位置，你需要两个这样的监听器：

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

您应该使用css添加id='tooltip'到工具提示中：

#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 - Track mouse position。

title = data.getValue(event.row, 3);是您从图表中获取数据的行，您必须按照希望的方式将此数据插入工具提示。我希望它会有所帮助。

谷歌泡泡图如何添加HTML工具提示

1 个答案: