GoogleバブルチャートHTMLツールチップを追加する方法

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

現在のところ、それは私が望むように配置されていないデフォルトのツールチップを示しています。私はフィールドを編集することもできません。

私はカスタムHTMLツールチップを使用したいと思いますが、悲しいことに悲しいことに、まだバブルチャートのGoogleチャートではサポートされていません。同じことを達成するために

任意の方法。

MY CODE

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のいくつかの種類を必要としますが、このような2人のリスナーが必要です。

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：Javascript - Track mouse position：

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のようなマウストラッカーのいくつかの種類から取られたマウスのコードです。

title = data.getValue(event.row, 3);は、グラフのデータからデータを取り出す行で、このデータをツールチップに挿入する必要があります。私はそれが助けてくれることを願う

出典

2016-05-30 11:17:32 Szymon

これはどのように行、列の賢明なデータを取得するのですかは、タイトルだけです – Alex

これで、すべての列でこれを行う方法を示す必要があります、私は私の答えを編集しました。 – Szymon

GoogleバブルチャートHTMLツールチップを追加する方法

答えて

関連する問題