google bubble chart comment ajouter l'info-bulle HTML

J'ai un graphique Google: graphique à bulles. Je veux ajouter une info-bulle HTML personnalisé, avec la valeur spécifiée par rapport au point:google bubble chart comment ajouter l'info-bulle 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>

Actuellement, il montre une info-bulle par défaut, qui n'est pas disposé dans la façon dont je veux. Et je ne peux pas éditer les champs aussi. Je souhaite utiliser l'info-bulle HTML personnalisée, mais malheureusement, elle n'est pas encore prise en charge par les graphiques Google dans les graphiques à bulles.

Une manière de réaliser la même chose.

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

Source

2016-05-30 Alex

Fondamentalement, vous avez besoin d'une sorte de mousetracker savoir où infobulle devrait être affichée et vous avez besoin de deux auditeurs comme ceci:

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

et vous devez ajouter à votre id='tooltip' infobulle avec comme 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 et y sont vos cordons de souris prises d'une sorte de suivi de la souris comme: Javascript - Track mouse position.

title = data.getValue(event.row, 3);title = data.getValue(event.row, 3); est la ligne où vous prenez des données de vos données de votre graphique et vous devez insérer ces données dans votre info-bulle de la façon dont vous voulez qu'il soit inséré. J'espère que cela aidera.

Source

2016-05-30 11:17:32 Szymon

Cela ne m'explique pas comment je reçois des lignes, les données de colonne ce que vous obtenez est juste le titre – Alex

Maintenant, il devrait montrer comment faire cela avec toutes vos colonnes, j'ai édité ma réponse. – Szymon

google bubble chart comment ajouter l'info-bulle HTML

Répondre

Questions connexes