Grafico Zing: come aggiungere ulteriori informazioni alla descrizione?

Sto provando Zing Chart e hanno serie JS in questo modo:Grafico Zing: come aggiungere ulteriori informazioni alla descrizione?

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

Quando hover-over punto specifico - posso mostrare tempo, valore e serie in un suggerimento, ma come mostrare Parameter1,2,3, dallo stesso array quando l'utente passa con il mouse su un punto specifico in un grafico a dispersione?

grazie.

fonte

2016-04-20 cikavladimir

È possibile utilizzare token personalizzati, definiti nell'oggetto "trama" o "serie" come attributo o matrice utilizzando il prefisso "dati". Ad es. "Data-fullname" o "data-extracredit".

Ecco un esempio in cui sono stati creati tre token personalizzati per i parametri 1, 2 e 3. Per richiamarli nelle descrizioni comandi, utilizzare i token% data-parameter1,% data-parameter2 e% data-parameter3. Guarda la 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

In alternativa, è possibile utilizzare un array per assegnare testo per ogni singolo nodo. Guarda la 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

Fammi sapere se questo aiuta! Sono nel team di ZingChart e sono felice di rispondere a ulteriori domande. Grazie!

fonte

2016-04-20 20:49:07 Elizabeth

Grafico Zing: come aggiungere ulteriori informazioni alla descrizione?

risposta

Problemi correlati