2013-12-07 11 views
5

Ich habe ein Google LineChart mit mehreren Zeilen. Diese Punkte teilen nicht die gleiche X-Wert des so muss ich meine Daten formatiert in einer bestimmten Art und Weise, es Arbeit zu machen:Google Charts: mehrere Zeilen mit benutzerdefinierten Tooltips

var data = google.visualization.arrayToDataTable([ 
     ["Y", "Your X & Y", "Product 1", "Product 2", "Product 3"], 
     [419, 589, null, null, null], 
     [386, null, 504, null, null], 
     [386, null, 526, null, null], 
     [387, null, 543, null, null], 
     [395, null, 564, null, null], 
     [402, null, 591, null, null], 
     [408, null, 612, null, null], 
     [378, null, null, 501, null], 
     [398, null, null, null, 600], 
     [460, null, null, null, 500] 
    ]); 

Jetzt i benutzerdefinierte Tooltips zu diesen Zeilen hinzufügen möchten, ich habe das Hinzufügen versucht, eine zusätzliche Spalte und setzen Sie die Rolle auf Tooltip .. aber dies betrifft nur die erste Zeile.

sehen beide Karten (mit und ohne Tooltip): http://jsfiddle.net/TD92C/8/

Wie füge ich benutzerdefinierte Tooltips für alle Linien? Dank

GELÖST: http://jsfiddle.net/asgallant/TD92C/14/

+0

Vielen Dank, Herr, um Ihre Lösung geteilt haben –

Antwort

0

Sie Ihre Variable wie diese

var data = google.visualization.arrayToDataTable([ 
//Columns 

    ["Y", //Name of the X-axis marker 
    "Your X & Y",{type: 'string', role: 'tooltip'}, 
    "Product 1",{type: 'string', role: 'tooltip'}, 
    "Product 2",{type: 'string', role: 'tooltip'}, 
    "Product 3",{type: 'string', role: 'tooltip'},], 
//Rows 
//Add tooltip column after every value in each row 

    [419,589,"tooltip info about your x & y",null,'',null,'',null,''], 
    [386,null,'',504,'','Custom Tooltip',null,'',null,''], 
    [386,null,'',526,'Custom Tooltip',null,'',null,''], 
    [387,null,'',543,'Custom Tooltip',null,'',null,''], 
    [378,null,'',null,'',501,'Custom Tooltip',null,''], 
    [383,null,'',null,'',511,'Custom Tooltip',null,''], 
    [368,null,'',null,'',null,'',526,'Custom Tooltip'], 
    [373,null,'',null,'',null,'',547,'Custom Tooltip'], 
]); 
machen müssen

Fiddle Daten sucht anders, aber wenn Sie korrigieren das erste Element in eine Zeichenfolge, die genau wie die Spalten ist angezeigt in 1. Spalte Index wird es korrekt sein