2016-04-20 32 views
5

Ben bu şekilde Zing Grafik çalışıyor ve JS dizi var am:Zing tablosu - araç ucuna daha fazla bilgi nasıl eklenir?

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

zaman vurgulu-over belirli bir nokta - Bir araç ipucu ama nasıl Parameter1,2,3 göstermek için Zaman, Değer ve Series gösterebilir, Kullanıcı bir dağılım grafiğinde belirli bir noktaya geldiğinde aynı Diziden mi?

Teşekkürler.

cevap

5

"Veri" veya "seri" nesnesinde tanımlanan özel simgeleri "veri" önekini kullanarak bir öznitelik veya dizi olarak kullanabilirsiniz. Örneğin, "data-fullname" veya "data-extracredit".

1, 2 ve 3 parametreleri için üç özel jetonun oluşturulduğu bir örnek. Araç ipuçlarında bunları geri çağırmak için,% data-parameter1,% data-parameter2 ve% data-parameter3 değerlerini kullanırsınız. Demoyu gör. Alternatif olarak

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

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>

, tek tek her bir düğüm için metin atamak için bir dizi kullanılabilir. Demoyu gör.

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

Eğer yardımcı olur bana bildirin! ZingChart ekibindeyim ve daha fazla soruya cevap vermekten mutluluk duyuyorum. Teşekkürler!

İlgili konular