jQWidgets jqxBarGauge relativeInnerRadius Property – GeeksforGeeks

jQWidgets est un framework JavaScript permettant de créer des applications Web pour PC et appareils mobiles. Il s’agit d’un cadre très puissant, indépendant de la plate-forme et optimisé qui est largement pris en charge.

La jqxBarGauge représente un widget de jauge à barres jQuery qui trace un graphique de jauge à barres pour les valeurs données.

La relativeInnerRadiusrelativeInnerRadius propriété est utilisée pour définir le rayon intérieur relatif de la jauge à barres. La valeur par défaut est 0.3.

Syntaxe:

$('.selector').jqxBarGauge({
    values: [array], 
    max: number,
    relativeInnerRadius: number
});

Lien CDN : Téléchargez jQWidgets à partir du lien https://www.jqwidgets.com/download/. Dans le fichier HTML, localisez les fichiers de script dans le dossier téléchargé :




Exemple 1: Ci-dessous, l’exemple montrant la mise en œuvre.

HTML

<!DOCTYPE html>

<html lang="en">

 

<head>

    <link rel="stylesheet"

          href="jqwidgets/styles/jqx.base.css"

          type="text/css" />

     

    <script type="text/javascript"

            src="scripts/jquery-1.11.1.min.js">

    </script>

 

    <script type="text/javascript"

            src="jqwidgets/jqxcore.js">

    </script>

 

    <script type="text/javascript"

            src="jqwidgets/jqxdraw.js">

    </script>

     

    <script type="text/javascript"

            src="jqwidgets/jqxbargauge.js">

    </script>

 

    <script type="text/javascript">

        $(document).ready(function ()

        {

            $('#gfg').jqxBarGauge({

                values: [100,105,110,115], 

                max: 140, 

                relativeInnerRadius: 0.6

            });

        });

    </script>

</head>

 

<body>

    <h1 style="color: green;"

        GeeksforGeeks 

    </h1>

 

    <h3

        jQWidgets | jqxBarGauge relativeInnerRadius property

    </h3>

 

    <div id="gfg"></div>

</body>

 

</html>

Production:

212

Référence: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxbargauge/jquery-bar-gauge-api.htm

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Aller en haut