Zing-Diagramm - Wie fügt man dem Tooltip weitere Informationen hinzu?

Ich versuche, Zing-Diagramm und habe JS-Array auf diese Weise:Zing-Diagramm - Wie fügt man dem Tooltip weitere Informationen hinzu?

"values": [ 
[1458846060000, 167.272, "Parameter1", "Parameter2", "Parameter3"], 
[1458847060000, 150.272, "Parameter1", "Parameter2", "Parameter3"] 
]

Wenn Hover-over bestimmten Punkt - ich Zeit, Wert und Serie in einem Tooltip zeigen kann, aber wie Parameter1,2,3 zu zeigen, aus demselben Array, wenn der Benutzer den Mauszeiger über einen bestimmten Punkt in einem Streudiagramm bewegt?

danke.

Quelle

2016-04-20 cikavladimir

Sie können benutzerdefinierte Token verwenden, die im Objekt "plot" oder "series" als Attribut oder Array mit dem Präfix "data" definiert sind. Z. B. "Daten-Vollname" oder "Daten-Extrakredit".

Hier ein Beispiel, in dem drei benutzerdefinierte Token für die Parameter 1, 2 und 3 erstellt wurden. Um sie in den Tooltips aufzurufen, würden Sie die Token% data-parameter1,% data-parameter2 und% data-parameter3 verwenden. Siehe die Demo.

var myConfig = { 
 
    "type":"scatter", 
 
    "title":{ 
 
    "text":"Custom Token as Attribute" 
 
    }, 
 
    "plot":{ 
 
    "tooltip":{ 
 
     "text":"%kv, %v, %data-parameter1, %data-parameter2, %data-parameter3." 
 
    } 
 
    }, 
 
    "scale-x":{ 
 
    "transform":{ 
 
     "type":"date", 
 
     "all":"%g:%i %A" 
 
    } 
 
    }, 
 
    "scale-y":{ 
 
    
 
    }, 
 
    "series":[ 
 
    { 
 
     "values": [ 
 
     [1458846060000, 167.272], 
 
     [1458847060000, 150.272], 
 
     [1458848060000, 134.311] 
 
     ], 
 
     "data-parameter1":"Parameter1", 
 
     "data-parameter2":"Paremeter2", 
 
     "data-parameter3":"Parameter3" 
 
    } 
 
    ] 
 
}; 
 
    
 
zingchart.render({ 
 
\t id : 'myChart', 
 
\t data : myConfig, 
 
\t height: 400, 
 
\t width: 600 
 
});

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script> 
 
\t \t <script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/"; 
 
\t \t ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"];</script></head> 
 
\t <body> 
 
\t \t <div id='myChart'></div> 
 
\t </body> 
 
</html>

http://demos.zingchart.com/view/78P4SI51

Alternativ kann ein Array zuweisen Text für jeden einzelnen Knoten verwenden. Siehe die Demo.

var myConfig = { 
 
    "type":"scatter", 
 
    "title":{ 
 
    "text":"Custom Token as Array" 
 
    }, 
 
    "plot":{ 
 
    "tooltip":{ 
 
     "text":"%kv, %v, %data-parameter1, %data-parameter2, %data-parameter3." 
 
    } 
 
    }, 
 
    "scale-x":{ 
 
    "transform":{ 
 
     "type":"date", 
 
     "all":"%g:%i %A" 
 
    } 
 
    }, 
 
    "scale-y":{ 
 
    
 
    }, 
 
    "series":[ 
 
    { 
 
     "values": [ 
 
     [1458846060000, 167.272], 
 
     [1458847060000, 150.272], 
 
     [1458848060000, 134.311] 
 
     ], 
 
     "data-parameter1":["Parameter1a","Parameter1b","Parameter1c"], 
 
     "data-parameter2":["Paremeter2a","Parameter2b","Parameter2c"], 
 
     "data-parameter3":["Parameter3a","Parameter3b","Parameter3c"] 
 
    } 
 
    ] 
 
}; 
 
    
 
zingchart.render({ 
 
\t id : 'myChart', 
 
\t data : myConfig, 
 
\t height: 400, 
 
\t width: 600 
 
});

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script> 
 
\t \t <script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/"; 
 
\t \t ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"];</script></head> 
 
\t <body> 
 
\t \t <div id='myChart'></div> 
 
\t </body> 
 
</html>

http://demos.zingchart.com/view/GSGWW4YO

Lassen Sie mich wissen, ob das hilft! Ich bin im ZingChart Team und freue mich auf weitere Fragen. Vielen Dank!

Quelle

2016-04-20 20:49:07 Elizabeth

Zing-Diagramm - Wie fügt man dem Tooltip weitere Informationen hinzu?

Antwort

Verwandte Themen