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

我有一個谷歌圖表：氣泡圖。我想添加自定義HTML工具提示，與指定相對於點值：谷歌氣泡圖如何添加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>

來源

2016-05-30 Alex

基本上你需要某種mousetracker的知道在哪裏提示要顯示你需要兩個偵聽器是這樣的：

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

title = data.getValue(event.row, 3);是您從圖表中獲取數據中的數據的行，您必須將該數據插入到您希望插入的工具提示中。我希望這會有所幫助。

來源

2016-05-30 11:17:32 Szymon

這並不能解釋我如何獲得行，列明智的數據你正在得到的只是標題 – Alex

現在它應該顯示如何做到這一點你所有的列，我編輯了我的答案。 – Szymon

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

回答

相關問題