Justgage.js ändern Titel, Wert, Label-font-size

Question

Ich versuche, die die Schriftgröße unter Verwendung reduzieren [titleFontSize: 12 ..] und verschiedene Kombinationen. aber nicht funktioniert. gleichen i verwendet für [valueFontSize: ..] & [labelFontSize: ..]

Wie kann ich die Schriftgröße des Titels, Wert ändern & Labels?

Code:

<script src="js/raphael-2.1.4.min.js"></script> 
<script src="js/justgage.js"> 

<script type="text/javascript"> 
    var gD = new JustGage({ 
    id: "jgDownload", 
    value: 67, 
    decimals: 2, 
    min: 0, 
    max: 1000, 
    title: "Download", 
    titleFontSize: 12, 
    titlePosition: "below", 
    titleFontColor: "red", 
    titleFontFamily: "Georgia", 
    titlePosition: "below", 
    valueFontColor: "blue", 
    valueFontFamily: "Georgia" 
    label: "Mbps", 
    lableFontSize: "10px", 
    width: 300, 
    height: 200, 
    relativeGaugeSize: true, 
    levelColors: [ 
      "#E63454", 
      "#AC001F", 
      "#F6AD37", 
      "#B87200", 
      "#24A081", 
      "#007759", 
      "#026071", 
      "#015C71" 
     ], 
    pointer: true, 
    counter: true,  
    }); 
</script> 

var gD = new JustGage({ 
 
    id: "jgDownload", 
 
    value: 67, 
 
    decimals: 2, 
 
    min: 0, 
 
    max: 1000, 
 
    title: "Download", 
 
    titleFontSize: "5px", 
 
    titlePosition: "below", 
 
    valueFontFamily: "Georgia", 
 
    valueFontSize: "5px", 
 
    label: "Mbps", 
 
    width: 300, 
 
    height: 200, 
 
    relativeGaugeSize: true, 
 
    levelColors: [ 
 
    "#E63454", 
 
    "#AC001F", 
 
    "#F6AD37", 
 
    "#B87200", 
 
    "#24A081", 
 
    "#007759", 
 
    "#026071", 
 
    "#015C71" 
 
    ], 
 
    pointer: true, 
 
    counter: true, 
 
});

#divDownloadOuter { 
 
    width: 50%; 
 
    clear: both; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/justgage/1.2.2/justgage.js"></script> 
 
<div id="divDownloadOuter"> 
 
    <div id="jgDownload"></div> 
 
</div>

JSFiddle: Link

Answer 1

Lösung mit CSS:

/* Title */ 
#jgDownload text:nth-child(6) tspan{ 
    font-size: 0.8em !important; 
} 

/* Value */ 
#jgDownload text:nth-child(7) tspan{ 
    font-size: 0.5em !important; 
} 

/* Label */ 
#jgDownload text:nth-child(8) tspan, #jgDownload text:nth-child(9) tspan, #jgDownload text:nth-child(10) tspan{ 
    font-size: 0.9em !important; 
} 

prüfen Link Beispiel: https://jsfiddle.net/amitshahc/gf0gm69j/5/

Answer 2

Versuchen mit titleMinFontSize. Es wird klappen.

titleMinFontSize: 20, 

Überprüfen Sie diese link für andere Attribute.

Answer 3

es Um mit justGage v1.2.2 Arbeit habe ich die folgenden:

/* Value */ 
#jgDownload > svg:nth-child(1) > text:nth-child(6) { 
    font-size: 0.8em !important; 
} 

(die ' text: nth-child 'gibt an, welches Element geändert werden soll, dh Text: nth-child (8) und text: nth-child (9) steht für die Labels)

Sei sanft zu mir, das ist mein erster Beitrag!