Justgage.js Change Title, Value, этикетки размер шрифта

Я пытаюсь уменьшить размер шрифта, используя [titleFontSize: 12 ..] и различные комбинации. но не работает. же я использовал для [valueFontSize: ..] & [labelFontSize: ..]

Как я могу изменить размер шрифта на название, Value & наклейками?

Код:

<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

Попробуйте это, может быть, work 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; 
}

(' текст: значение nth-child определяет, какой элемент следует изменить, то есть текст: nth-child (8) и текст: nth-child (9) представляет метки)

Будьте нежны ко мне, так как это мой первый пост!

источник

2017-01-22 14:14:31

Justgage.js Change Title, Value, этикетки размер шрифта

ответ

Смежные вопросы