google bubble chart Как добавить HTML-подсказку

У меня есть диаграмма Google: пузырьковая диаграмма. Я хочу, чтобы добавить пользовательский HTML подсказки, с заданным значением по отношению к точке:google bubble chart Как добавить 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(); 
};

х и у ваших корды мыши взяты из какого-то трекере мыши, как: Javascript - Track mouse position.

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

источник

2016-05-30 11:17:32 Szymon

Это не объясняет, как я могу получить данные о строках, столбцах, которые вы получаете, это просто заголовок – Alex

Теперь он должен показать, как это сделать со всеми вашими столбцами, я отредактировал свой ответ. – Szymon

google bubble chart Как добавить HTML-подсказку

ответ

Смежные вопросы