- Colored
- Cet indicateur est une combinaison d'icônes, telles que des cercles ou des flèches vers le haut ou vers le bas, et des couleurs. Faites votre choix parmi les icônes et les couleurs prédéfinies pour représenter les valeurs positives, négatives et nulles. La taille de l'icône ne change pas en fonction de la valeur.
- Sized
- Cet indicateur est une combinaison de formes, telles que des cercles ou des carrés et des couleurs. Faites votre choix parmi les formes et les couleurs prédéfinies pour représenter les valeurs positives, négatives et nulles. La taille de la forme change en fonction de la valeur.
- HTML
- Utilisez cette option pour vous servir d'une image ou d'un texte personnalisé en tant qu'indicateur. Cliquez sur l'icône d'édition
pour les valeurs positives, négatives et 0 et insérez un fragment de code HTML dans la zone fournie. Par exemple, les icônes liées à la météo de l'exemple de la rubrique Tables de données sont basées sur le code HTML suivant.
- Le code suivant a été utilisé pour les valeurs positives :
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="55px" height="55px" viewBox="0 0 55 55" style="enable-background:new 0 0 55 55;" xml:space="preserve">
<style type="text/css">
.st0S{fill:#FDD600;stroke:#FF7832;stroke-miterlimit:10;}
.st1S{fill:#FF5003;}
</style>
<g id="sunny">
<path class="st0S" d="M27.4,14.4c-7.2,0-13,5.8-13,13c0,7.2,5.8,13,13,13c7.2,0,13-5.8,13-13C40.5,20.3,34.6,14.4,27.4,14.4z"/>
<rect x="26" class="st1S" width="2" height="11.8"/>
<rect x="26" y="43" class="st1S" width="2" height="11.8"/>
<rect x="41.6" y="6.3" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 64.1155 50.9717)" class="st1S" width="2" height="11.8"/>
<rect x="11.2" y="36.7" transform="matrix(0.7066 0.7076 -0.7076 0.7066 33.7401 3.8618)" class="st1S" width="2" height="11.8"/>
<rect x="43" y="26" class="st1S" width="12" height="2"/>
<rect y="26" class="st1S" width="11.8" height="2"/>
<rect x="36.7" y="41.6" transform="matrix(0.7072 0.707 -0.707 0.7072 42.6052 -17.6459)" class="st1S" width="11.8" height="2"/>
<rect x="6.3" y="11.2" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 12.2134 29.4762)" class="st1S" width="11.8" height="2"/>
</g>
</svg>
- Le code suivant a été utilisé pour la valeur nulle :
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="55px" height="55px" viewBox="0 0 55 55" style="enable-background:new 0 0 55 55;" xml:space="preserve">
<style type="text/css">
.st0C{fill:#FF5003;}
.st1C{fill:#FDD600;}
.st2C{fill:#C0E6FF;}
</style>
<g id="partly-cloudy">
<rect x="18.6" y="1.8" class="st0C" width="2" height="8.2"/>
<rect x="29.6" y="6.3" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 44.9432 39.4708)" class="st0C" width="2" height="8.2"/>
<rect x="0" y="20.4" class="st0C" width="8.2" height="2"/>
<rect x="4.5" y="9.4" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 7.3475 23.8765)" class="st0C" width="8.2" height="2"/>
<circle class="st1C" cx="19.6" cy="21.5" r="9.7"/>
<path class="st2C" d="M47.6,37.7c0.1-0.7,0.1-1.3,0.1-2c0-2.2-0.4-4.2-1-6.1c-1.6-6.3-8.6-11.1-16.9-11.1c-7.8,0-14.4,4.2-16.6,9.9
l-0.1,0c-6.4,1-9.6,5.9-9.6,11.8c0,1,0.1,1.9,0.4,2.8C1.7,43.4,0,45.3,0,47.6c0,2.6,2.1,4.5,4.7,4.5c0,0,0.1-0.1,0.1-0.1h10.6
c0.1,0,0.2,0,0.2,0c0.1,0,0.2,0,0.3,0h14.7c0.1,0,0.2,0,0.3,0s0.2,0,0.2,0h16.2c0,0,0.1,0.1,0.1,0.1c4.1,0,7.4-3.2,7.4-7.2
C54.9,40.9,51.6,37.8,47.6,37.7z"/>
</g>
</svg>
- Le code suivant a été utilisé pour les valeurs négatives :
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="55px" height="55px" viewBox="0 0 55 55" style="enable-background:new 0 0 55 55;" xml:space="preserve">
<style type="text/css">
.st0R{fill:#7CC7FF;stroke:#1D3649;stroke-miterlimit:10;}
.st1R{fill:#264A60;}
</style>
<path class="st0R" d="M47.9,26.1c0.1-0.7,0.1-1.3,0.1-2c0-9.1-6.2-16.5-16.8-16.5c-6.5,0-12.2,3.7-15,9.1c-0.1,0-0.2,0-0.3,0
c-8.1,0-12.2,5.4-12.2,12c0,1,0.1,1.9,0.4,2.8C2,31.8,0.3,33.7,0.3,36c0,2.6,2.1,4.7,4.7,4.7c0,0,0.1,0,0.1,0l44.1-0.1
c3.4-0.7,5.9-3.6,5.9-7.1C55.2,29.4,52,26.2,47.9,26.1z"/>
<rect x="16.1" y="36.5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 32.332 -3.1173)" class="st1R" width="7.7" height="2"/>
<rect x="28.1" y="36.5" transform="matrix(0.707 0.7072 -0.7072 0.707 35.849 -11.5901)" class="st1R" width="7.7" height="2"/>
<rect x="40.1" y="36.5" transform="matrix(0.707 0.7072 -0.7072 0.707 39.3651 -20.0764)" class="st1R" width="7.7" height="2"/>
<rect x="14.1" y="41.5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 35.2818 -0.2386)" class="st1R" width="7.7" height="2"/>
<rect x="26.1" y="41.5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 38.7965 -8.7238)" class="st1R" width="7.7" height="2"/>
<rect x="38.1" y="41.5" transform="matrix(0.707 0.7072 -0.7072 0.707 42.315 -17.1969)" class="st1R" width="7.7" height="2"/>
</svg>