Justgage.js更改標題，價值，標籤字體尺寸

我試圖使用所述減小字體大小[titleFontSize：12 ..]和各種組合。但不工作。同我用[valueFontSize：..] & [labelFontSize：..]

如何更改標題，價值&標籤的字體大小？

代碼：

<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

來源

2016-06-07 Amit Shah

試試這個，可能是工作titleTextStyle：{fontSize：12} –

@PriyankDey謝謝你的嘗試，但不工作。我爲您的實驗附上了代碼段和jsfiddle鏈接。 –

解決方案使用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; 
}

檢查該鏈接，以實例：https://jsfiddle.net/amitshahc/gf0gm69j/5/

來源

2016-06-08 03:18:06

我無法找到jsfiddle使用哪個版本，但是在我當前的版本中（1.2.2）標題是孩子（5），值是孩子（6） – Cageman

@Cageman不知道爲什麼，但是我使用的版本在上面的jsfiddle鏈接也是1.2.2 –

嘗試用titleMinFontSize。它會工作。

titleMinFontSize: 20,

檢查此link的其他屬性。

來源

2016-06-07 09:45:09

這是工作，但只有當增加。減少10個不生效。謝謝，雖然我設法通過CSS來完成。 –

好的。你可以檢查其他屬性，我給你鏈接。祝你的項目好運。 –

爲了得到它與justGage V1.2.2工作我用下面的：

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

（以下簡稱「文本：第n個孩子的值指示要改變的元素，即文本：第n孩子（8）和文本：第n孩子（9）代表標籤）

對我溫柔，因爲這是我的第一篇文章！

來源

2017-01-22 14:14:31

Justgage.js更改標題，價值，標籤字體尺寸

回答

相關問題