ZingChart - Verschiedene Farben für Text im Fadenkreuz

Wenn wir den Inhalt von crosshairX im Attribut 'plotarea' angeben, wird standardmäßig die Farbe des gesamten Textes schwarz. Ich möchte diesen Text des Fadenkreuzes in zwei verschiedenen Farben darstellen. Angenommen, mein Text lautet "2016: 0,07 M", dann sollte "2016" in blauer Farbe und "0,07 M" in roter Farbe angezeigt werden. Wie können wir das erreichen?ZingChart - Verschiedene Farben für Text im Fadenkreuz

Quelle

2016-08-19 Anshul

Vollständige Offenlegung, ich bin ein Mitglied des ZingChart-Teams.

Ich müsste wissen, wie Sie Ihren Text anzeigen, um eine spezifischere Lösung zu haben. Verwenden Sie den Standard plotLabel.text oder haben Sie einen benutzerdefinierten plotLabel.text? Wenn ja, worauf ist es eingestellt?

Ohne zu wissen, was Sie für den Text definiert haben, habe ich mir die Freiheit genommen, eine Demo der verschiedenen Kombinationen von Farben und Text auf eine plotLabel zu erstellen.

Es gibt ein paar Dinge passieren hier:

headertext ist die Definition deren Textfarbe als Grau
der erste Span-Tag in Text wird ebenso die Farbe mit% Farbe
des zweiten Span-Tag vererben in Text seine Textfarbe als schwarz
das plotLable.color Attribut definiert, ist rot alle anderen Text außerhalb der span-Tags rot

machen

var myConfig = { 
 
    \t type: "line", 
 
    \t scaleX:{ 
 
    \t values:['Mon','Tue','Wed','Th','Fri','Sat','Sun'] 
 
    \t }, 
 
    \t crosshairX:{ 
 
    \t plotLabel:{ 
 
    \t  headerText:'<span style="color:#777">Header Text</span>', 
 
    \t  text:'<span style="color:%color">%kv</span>: <span style="color:black">%v</span> Extra Text...', 
 
    \t  color:'red' 
 
    \t } 
 
    \t }, 
 
\t series : [ 
 
\t \t { 
 
\t \t \t values : [35,42,67,89,25,34,67] 
 
\t \t }, 
 
\t \t { 
 
\t \t \t values : [35,42,67,89,25,34,67].sort() 
 
\t \t } 
 
\t ] 
 
}; 
 

 
zingchart.render({ 
 
\t id : 'myChart', 
 
\t data : myConfig, 
 
\t height: 350, 
 
\t width: '100%' 
 
});

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t <!--Assets will be injected here on compile. Use the assets button above--> 
 
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script> 
 
\t \t <script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";</script> 
 
\t <!--Inject End--> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id='myChart'></div> 
 
\t </body> 
 
</html>

Quelle

2016-08-19 16:01:40 nardecky

Dank @nardecy. Genau das wollte ich erreichen. Zingchart ist gut :-) – Anshul

ZingChart - Verschiedene Farben für Text im Fadenkreuz

Antwort

Verwandte Themen