hinzufügen Tooltips zu einem Google-Liniendiagramm mit Serie mehr Daten - mit vereinfachter Testfall und Screenshot

Ich habe eine Google Line Chart mit 2 Datenreihen - Row A und Row B:hinzufügen Tooltips zu einem Google-Liniendiagramm mit Serie mehr Daten - mit vereinfachter Testfall und Screenshot

enter image description here

Hier ist der sehr einfache Testcode - öffnen sie sie nur im Browser und es funktioniert:

<!DOCTYPE HTML> 
<html> 
<head> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script> 
<script type="text/javascript"> 

     var data = {"rows":[ 
     {"c":[{"v":"C"},{"v":-43},{"v":-42}]}, 
     {"c":[{"v":"D"},{"v":-49},{"v":-39}]}, 
     {"c":[{"v":"E"},{"v":-49},{"v":-48}]}, 
     {"c":[{"v":"F"},{"v":-50},{"v":-49}]}, 
     {"c":[{"v":"G"},{"v":-57},{"v":-56}]}], 

     "cols":[ 
     {"p":{"role":"domain"},"label":"MEASUREMENT","type":"string"}, 
     {"p":{"role":"data"},"label":"Row A","type":"number"}, 
     {"p":{"role":"data"},"label":"Row B","type":"number"}]}; 

     function drawCharts() { 
      var x = new google.visualization.DataTable(data); 

      var options = { 
       title: 'How to add tooltips?', 
       width: 800, 
       height: 600 
      }; 

      var chart = new google.visualization.LineChart(document.getElementById('test')); 
      chart.draw(x, options); 
     } 

     $(function() { 
      google.setOnLoadCallback(drawCharts); 
     }); 

</script> 
</head> 
<body> 
<div id="test"></div> 
</body> 
</html>

ich möchte tooltips jedem Datenpunkt hinzuzufügen, das würde zum Beispiel Anzeige:

Reihe A: x = D y = -49

auf Maus schweben. Und ich kann nicht dataTable.addColumn verwenden, weil mein Diagramm sofort von einem Perl-Skript generiert wird und ich einfach ein data Objekt mit cols und rows wie oben verwenden.

Weiß jemand bitte, wie man es hier macht?

Quelle

2013-07-29 Alexander Farber

Sie können DataView verwenden, um die QuickInfo-Spalten für Sie zu erstellen. Dieser Code-Schnipsel wird dynamisch eine Tooltip-Spalte in der Dataview für jede Datenreihe erstellen:

var columns = [0]; 
for (var i = 1; i < x.getNumberOfColumns(); i++) { 
    columns.push(i); 
    columns.push({ 
     type: 'string', 
     properties: { 
      role: 'tooltip' 
     }, 
     calc: (function (j) { 
      return function (dt, row) { 
       return dt.getColumnLabel(j) + ': x=' + dt.getValue(row, 0) + ' y=' + dt.getValue(row, j) 
      } 
     })(i) 
    }); 
} 
var view = new google.visualization.DataView(x); 
view.setColumns(columns);

Siehe Arbeitsbeispiel hier: http://jsfiddle.net/asgallant/xWwxP/

Quelle

2013-07-29 19:20:24 asgallant

hinzufügen Tooltips zu einem Google-Liniendiagramm mit Serie mehr Daten - mit vereinfachter Testfall und Screenshot

Antwort

Verwandte Themen