jqwidgets fond de style guage radial

Question

J'utilise jqwidgets. Dans ces widgets, j'utilise une jauge radiale. Pour cette jauge radiale, je veux donner une couleur de fond radiale. J'ai un code quelque chose comme ça pour changer la couleur de fond dans la jauge radiale.

$('#gauge').jqxGauge({ style: { fill: '#cccccc', stroke: '#cccccc' }}); 

Dans le code ci-dessus, j'ai essayé quelque chose comme ça,

$('#gauge').jqxGauge({ style: { fill: 'linear-gradient(to top, #000 19%, #000 41%, #232323 49%, #fff)', stroke: 'linear-gradient(to top, #000 19%, #000 41%, #232323 49%, #fff)' }}); 

Mais ce isnt travail. Aidez-moi, s'il vous plaît.

Merci.

Answer 1

Je ne pense pas que les dégradés CSS fonctionnent comme des remplissages SVG.

Vous aurez donc besoin de définir vos dégradés dans un fichier SVG intégré dans la page. Ensuite, vous pouvez les référencer pour votre jauge.

Ainsi, par exemple, la définition gradient SVG équivalent pour votre emplissent serait:

<svg width="0" height="0"> 
    <defs> 
     <linearGradient id="gaugefill" x1="0" y1="1" x2="0" y2="0"> 
      <stop offset="19%" stop-color="#000"/> 
      <stop offset="41%" stop-color="#000"/> 
      <stop offset="49%" stop-color="#232323"/> 
      <stop offset="100%" stop-color="#fff"/> 
     </linearGradient> 
    </defs> 
</svg> 

Mettre cela dans votre page quelque part. Alors vous devriez pouvoir l'appliquer à votre guage avec:

$('#gauge').jqxGauge({ style: { fill: 'url(#gaugefill)', stroke: '#ccccc` }}); 

Je vous laisserai le coup pour vous faire.

PS. Disclaimer: Je n'ai pas utilisé ces widgets, donc c'est une supposition éclairée seulement.