Léon  Peltier

Léon Peltier

1660422600

Créer Un Graphique De Jauge Linéaire En JavaScript

Nous montrerons comment créer rapidement un graphique de jauge linéaire cool et interactif qui met en évidence les données de vaccination Covid-19 dans le monde. Notre graphique nous permettra de visualiser l'état de la vaccination contre le Covid-19 au moment de la rédaction et affichera deux types de données - montrant à quelle distance nous sommes de l'objectif à mi-chemin de la vaccination partielle et complète de la population mondiale.

image de couverture de jauge linéaire

Qu'est-ce qu'un graphique à jauge linéaire ?

La visualisation des données est un outil inestimable, compte tenu de la grande quantité de données créées et des nombreuses possibilités de glaner des informations à partir des données. La visualisation des données est particulièrement utile pour identifier les tendances, interpréter les modèles et communiquer des idées complexes au public cible.

Un graphique à jauge linéaire représente une échelle linéaire verticale ou horizontale qui affiche les valeurs requises, avec une échelle de couleurs ainsi qu'un ou plusieurs pointeurs. Les valeurs minimales et maximales de la plage de données peuvent être définies sur les axes en fonction des données représentées. La position du pointeur indique la valeur actuelle de la métrique.

Un graphique à jauge peut afficher une ou plusieurs valeurs à l'aide d'un pointeur individuel ou d'une combinaison de marqueurs. Le pointeur peut être une aiguille ou une ligne avec un marqueur de n'importe quelle forme comme un cercle, un carré, un rectangle ou un triangle.

Le type de graphique à jauge linéaire est une représentation visuelle efficace pour afficher à quel point les valeurs sont proches ou éloignées du point de données souhaité.

Types de jauges linéaires

Les différents types de jauges linéaires sont le tableau de thermomètre, le tableau à puces, le tableau de réservoir et le tableau à LED. Le thermomètre à mercure - composé de graduations mineures qui affichent la température avec la valeur du pointeur - est un exemple classique de graphique à jauge linéaire.

La visualisation de jauge linéaire que nous allons construire

Voici un aperçu du graphique de jauge linéaire final. Suivez ce didacticiel pour savoir comment nous construisons ce graphique à jauge linéaire intéressant et informatif avec JavaScript.

graphique à jauge linéaire version finale

Les quatre étapes pour créer une jauge linéaire JavaScript

Il est toujours utile d'avoir des compétences avec des technologies comme HTML et JavaScript. Mais dans ce didacticiel, nous utilisons une bibliothèque de graphiques JS qui facilite la création de graphiques convaincants comme la jauge linéaire, même avec des connaissances techniques minimales.

Il existe plusieurs bibliothèques de graphiques JavaScript pour visualiser facilement les données, et ici nous créons le graphique à jauge linéaire avec AnyChart . Cette bibliothèque est flexible, avec une documentation complète , et elle se compose d' excellents exemples . De plus, il dispose d'un terrain de jeu pour expérimenter le code et est gratuit pour une utilisation non commerciale. Si vous souhaitez acheter une version sous licence, vous pouvez consulter les options disponibles , et si vous êtes une organisation éducative ou à but non lucratif, vous pouvez nous contacter pour une licence gratuite ici .

Les étapes pour créer une jauge linéaire JavaScript

Voici les étapes de base pour créer un graphique à jauge linéaire :

  1. Créez une page HTML de base.
  2. Incluez les fichiers JavaScript nécessaires.
  3. Ajoutez les données.
  4. Écrivez le code JavaScript du graphique.

Examinons chacune de ces étapes en détail ci-dessous.

1. Créez une page HTML de base

La première chose que nous devons faire est de créer une page HTML qui contiendra notre visualisation. Nous ajoutons un <div>élément de bloc et lui donnons un ID afin que nous puissions le référencer plus tard :

<html lang="en">
  <head>
    <title>JavaScript Linear Gauge</title>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

Les attributs largeur et hauteur du <div>sont définis sur 100 % afin que le graphique soit restitué sur tout l'écran. Ces attributs peuvent être modifiés selon les besoins.

2. Incluez les fichiers JavaScript nécessaires

L'étape suivante consiste à référencer les liens JS dans la page HTML. Nous utiliserons la bibliothèque AnyChart pour ce didacticiel, incluons donc les fichiers correspondants à partir de leur CDN .

Pour créer un graphique à jauge linéaire, nous devrons ajouter trois scripts : le module de base , le module de jauge linéaire et le module de table :

<html lang="en">
  <head>
    <title>JavaScript Linear Gauge</title>
    <style type="text/css">
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      // All the code for the JS linear gauge will come here
    </script>
    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-linear-gauge.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-table.min.js"></script>
  </body>
</html>

3. Ajoutez les valeurs de données

Les données du graphique à jauge linéaire sont collectées à partir de Our World in Data et incluses dans le code. Sur ce site, on peut voir le pourcentage de personnes ayant reçu une et deux doses de vaccin Covid pour chaque continent dans le monde entier.

Parce que (au moment de la rédaction) aucun des nombres n'est supérieur à 50 %, nous avons maintenu la limite maximale de l'axe de toutes les jauges linéaires à 50 %, et nous comparons à quelle distance de cette marque se trouve chaque continent, ainsi que le chiffre global. Nous indiquons au moins les chiffres partiellement vaccinés avec une représentation LED, et les chiffres entièrement vaccinés avec un pointeur de barre. Nous verrons comment les données sont ajoutées dans la dernière étape.

Alors, nos premières étapes sont terminées, et maintenant ajoutons le code pour créer un graphique à jauge linéaire avec JavaScript !

4. Écrivez le code JavaScript du graphique

Avant d'ajouter du code, nous enfermons tout dans une fonction qui s'assure que tout le code qu'elle contient ne s'exécute qu'une fois la page chargée.

La création d'un graphique à jauge linéaire implique quelques étapes et est un peu plus complexe que les autres types de graphiques de base. Mais cela ne veut pas dire que c'est très difficile, et nous passerons par chaque étape pour comprendre comment le graphique est fait.

Définition de l'échelle linéaire et de l'axe du graphique de jauge

Nous avons plusieurs pointeurs dans notre graphique. Alors, commençons par créer une fonction qui accepte deux valeurs : une pour le pointeur de la barre et une pour la jauge LED. Nous allons ensuite créer une jauge, définir les données et spécifier la disposition horizontale. Ensuite, nous allons définir la plage des échelles et des axes. Nous allons créer une échelle linéaire avec les plages minimale et maximale. Pour l'axe, nous allons définir les attributs et définir l'orientation :

function drawGauge(value, settings) {
  // Create gauge with settings
  const gauge = anychart.gauges.linear();
  gauge.data([value, settings.value]);
  gauge.layout('horizontal');

  // Set scale for gauge
  const scale = anychart.scales.linear();
  scale.minimum(0).maximum(settings.maximum).ticks({ interval: 2 });

  // Set axis for gauge
  const axis = gauge.axis(0);
  axis.width('1%').offset('43%').scale(scale).orientation('bottom');
}

Réglage du pointeur de barre et de l'étiquette

Nous allons maintenant créer le pointeur de barre et l'étiquette de la série de barres. L'étiquette reçoit un décalage pour éviter le chevauchement avec le pointeur :

// Create and set bar point
const barSeries = gauge.bar(0);

barSeries
  .scale(scale)
  .width('4%');

// Create and set label with actual data
const labelBar = barSeries.labels();
labelBar
  .enabled(true)
  .offsetY('-15px');

Création du pointeur LED et définition de l'attribut de couleur

Dans les points LED, nous allons spécifier l'écart entre les points et utiliser la propriété dimmer pour définir la couleur des points LED résiduels pour indiquer un effet non éclairé. Nous déclarerons également l'échelle de couleur des points LED allumés :

// Create and set LED point
const ledPointer = gauge.led(1);

ledPointer
  .offset('10%')
  .width('30%')
  .count(settings.maximum)
  .scale(scale)
  .gap(0.55)
  .dimmer(function () {
    return '#eee';
  });

ledPointer.colorScale().colors(['#63b39b', '#63b39b']);

Déclarer les jauges avec la valeur cible de chaque point de données

Pour faire la jauge linéaire pour chaque continent, nous appellerons la fonction définie ci-dessus pour chaque région avec ses données. Le premier nombre indique les données de la valeur cible et la seconde variable est un objet avec les données de la LED. Le maximumreste une constante de 50, tandis que valuereprésente la valeur en pourcentage de la population entièrement vaccinée pour chaque point de données. Cette valeur sera affichée par le pointeur :

// Create gauges
const world = drawGauge(13.68, { maximum: 50, value: 27.13 });
const europe = drawGauge(36.98, { maximum: 50, value: 47.28 });
const nAmerica = drawGauge(36.77, { maximum: 50, value: 46.53 });
const sAmerica = drawGauge(22.8, { maximum: 50, value: 40.54 });
const asia = drawGauge(10.14, { maximum: 50, value: 27.16 });
const oceania = drawGauge(9.75, { maximum: 50, value: 22.12 });
const africa = drawGauge(1.56, { maximum: 50, value: 3.04 });

Réglage de la disposition des jauges linéaires

Pour afficher chacune des jauges linéaires l'une sous l'autre, nous allons définir un tableau et ajouter le titre avec chaque point de données sur une ligne distincte. Nous ajouterons les différentes propriétés de la mise en page, telles que l'alignement et la taille de la police. Nous allons également définir des paramètres pour la première ligne, puisqu'il s'agit du titre, et définir l'attribut width de la première colonne sur 100 % puisque nous n'avons plus besoin de colonnes :

// Create table to place gauges
const layoutTable = anychart.standalones.table();
layoutTable
  .hAlign('right')
  .vAlign('middle')
  .fontSize(14)
  .cellBorder(null);

// Put gauges into the layout table
layoutTable.contents([
  [null, 'Covid-19 Vaccination - How far are we from the halfway mark?'],
  ['World', world],
  ['Europe', europe],
  ['North America', nAmerica],
  ['South America', sAmerica],
  ['Asia', asia],
  ['Oceania', oceania],
  ['Africa', africa]
]);

// Set height for first row in layout table
layoutTable
  .getRow(0)
  .height(50)
  .fontSize(22)
  .hAlign('center');

// Set the first column to 100% width
layoutTable.getCol(0).width(100);

Dessiner le graphique

La dernière étape consiste à référencer le <div>conteneur que nous avons ajouté à l'étape précédente et à dessiner le graphique :

// Set container id and initiate drawing
layoutTable.container('container');
layoutTable.draw();

Et c'est tout. Nous avons maintenant un graphique de jauge linéaire JavaScript entièrement fonctionnel et magnifique ! Le code de cette version initiale de la jauge linéaire peut être consulté sur CodePen .

Version initiale de jauge linéaire

Rendre le graphique accessible

C'est toujours une bonne pratique de s'assurer que les graphiques sont accessibles au plus grand nombre. Donc, en gardant tout à l'esprit, nous avons créé une version de base du graphique à jauge linéaire qui convient mieux aux lecteurs d'écran. Vous pouvez vérifier cela ici et également en savoir plus sur cet aspect dans la documentation de la bibliothèque JavaScript AnyChart.

Personnalisation de la jauge linéaire

Le graphique à jauge linéaire par défaut que nous avons créé semble génial en ce moment, mais quelques modifications amélioreront la lisibilité et rendront le graphique encore plus impressionnant. Les bibliothèques JavaScript sont parfaites non seulement pour créer rapidement des graphiques, mais aussi pour personnaliser les visualisations selon les besoins. Les bibliothèques de graphiques offrent de nombreuses options de configuration pour contrôler le comportement et l'esthétique des graphiques. Apportons quelques modifications mineures mais efficaces à notre graphique à jauge linéaire actuel.

Changement de couleur

Pour rendre la jauge linéaire plus cohérente, faisons de l'attribut de couleur du pointeur de la barre une version plus sombre des points LED. Nous le ferons en spécifiant les attributs fill et stroke de la barre :

// Create and set bar point
const barSeries = gauge.bar(0);
barSeries
  .scale(scale)
  .width('4%')
  .fill('#296953')
  .stroke('#296953');

Ajout d'une légende à notre graphique à jauge linéaire

Étant donné que nous avons utilisé différentes couleurs pour la barre, les pointeurs LED allumés et non allumés, il est recommandé de fournir une légende pour expliquer les couleurs. Nous allons créer une légende et l'ajouter sous le titre du graphique :

// Create stand alone legend
const legend = anychart.standalones.legend();
legend
.position('center')
.items([
    { text: 'Fully vaccinated', iconFill: '#296953' },
    { text: 'Partially vaccinated', iconFill: '#63b39b' },
    { text: 'Not vaccinated', iconFill: '#eee' }
]);

Formatage des info-bulles

Pour faciliter une meilleure communication des données, formatons l'info-bulle pour la rendre plus informative en affichant les valeurs sous forme de pourcentage et en indiquant que la valeur maximale de la jauge est de 50 % :

// Set gauge tooltip
gauge
    .tooltip()
    .useHtml(true)
    .titleFormat('{%Value} %')
        .format(
        'Maximum on scale: ' +
        settings.maximum +
        ' %'
    );

Découvrez le code complet de cette version sur CodePen .

Formatage des axes et des étiquettes

La dernière chose que nous ferons est d'afficher toutes les valeurs de données sous forme de pourcentages pour éviter toute confusion. Nous ajouterons également un sous-titre sous forme de ligne dans le tableau sous le titre pour indiquer que les valeurs sont des pourcentages. Une dernière chose sera d'embellir les étiquettes des barres avec des polices plus audacieuses.

Version finale de la jauge linéaire

Le code final complet de ce graphique de jauge linéaire JavaScript peut être trouvé sur CodePen .

Conclusion

Dans ce tutoriel étape par étape, nous avons vu comment créer des graphiques JavaScript fonctionnels et visuellement attrayants n'est pas trop difficile avec une bonne bibliothèque JavaScript. Consultez la documentation et les exemples pour mieux comprendre les caractéristiques et les propriétés de la jauge linéaire. Veuillez poser des questions en cas de doute sur ce graphique ou d'autres visualisations.

Il existe plusieurs options de graphique fournies par AnyChart , et il existe également de nombreuses autres bibliothèques de graphiques JavaScript pour créer de belles visualisations.

Faisons tous vacciner et restons en bonne santé pour continuer à créer plus de visualisations !

 Source : https://www.sitepoint.com/create-linear-gauge-chart-javascript/

#javascript 

What is GEEK

Buddha Community

Créer Un Graphique De Jauge Linéaire En JavaScript
Léon  Peltier

Léon Peltier

1660422600

Créer Un Graphique De Jauge Linéaire En JavaScript

Nous montrerons comment créer rapidement un graphique de jauge linéaire cool et interactif qui met en évidence les données de vaccination Covid-19 dans le monde. Notre graphique nous permettra de visualiser l'état de la vaccination contre le Covid-19 au moment de la rédaction et affichera deux types de données - montrant à quelle distance nous sommes de l'objectif à mi-chemin de la vaccination partielle et complète de la population mondiale.

image de couverture de jauge linéaire

Qu'est-ce qu'un graphique à jauge linéaire ?

La visualisation des données est un outil inestimable, compte tenu de la grande quantité de données créées et des nombreuses possibilités de glaner des informations à partir des données. La visualisation des données est particulièrement utile pour identifier les tendances, interpréter les modèles et communiquer des idées complexes au public cible.

Un graphique à jauge linéaire représente une échelle linéaire verticale ou horizontale qui affiche les valeurs requises, avec une échelle de couleurs ainsi qu'un ou plusieurs pointeurs. Les valeurs minimales et maximales de la plage de données peuvent être définies sur les axes en fonction des données représentées. La position du pointeur indique la valeur actuelle de la métrique.

Un graphique à jauge peut afficher une ou plusieurs valeurs à l'aide d'un pointeur individuel ou d'une combinaison de marqueurs. Le pointeur peut être une aiguille ou une ligne avec un marqueur de n'importe quelle forme comme un cercle, un carré, un rectangle ou un triangle.

Le type de graphique à jauge linéaire est une représentation visuelle efficace pour afficher à quel point les valeurs sont proches ou éloignées du point de données souhaité.

Types de jauges linéaires

Les différents types de jauges linéaires sont le tableau de thermomètre, le tableau à puces, le tableau de réservoir et le tableau à LED. Le thermomètre à mercure - composé de graduations mineures qui affichent la température avec la valeur du pointeur - est un exemple classique de graphique à jauge linéaire.

La visualisation de jauge linéaire que nous allons construire

Voici un aperçu du graphique de jauge linéaire final. Suivez ce didacticiel pour savoir comment nous construisons ce graphique à jauge linéaire intéressant et informatif avec JavaScript.

graphique à jauge linéaire version finale

Les quatre étapes pour créer une jauge linéaire JavaScript

Il est toujours utile d'avoir des compétences avec des technologies comme HTML et JavaScript. Mais dans ce didacticiel, nous utilisons une bibliothèque de graphiques JS qui facilite la création de graphiques convaincants comme la jauge linéaire, même avec des connaissances techniques minimales.

Il existe plusieurs bibliothèques de graphiques JavaScript pour visualiser facilement les données, et ici nous créons le graphique à jauge linéaire avec AnyChart . Cette bibliothèque est flexible, avec une documentation complète , et elle se compose d' excellents exemples . De plus, il dispose d'un terrain de jeu pour expérimenter le code et est gratuit pour une utilisation non commerciale. Si vous souhaitez acheter une version sous licence, vous pouvez consulter les options disponibles , et si vous êtes une organisation éducative ou à but non lucratif, vous pouvez nous contacter pour une licence gratuite ici .

Les étapes pour créer une jauge linéaire JavaScript

Voici les étapes de base pour créer un graphique à jauge linéaire :

  1. Créez une page HTML de base.
  2. Incluez les fichiers JavaScript nécessaires.
  3. Ajoutez les données.
  4. Écrivez le code JavaScript du graphique.

Examinons chacune de ces étapes en détail ci-dessous.

1. Créez une page HTML de base

La première chose que nous devons faire est de créer une page HTML qui contiendra notre visualisation. Nous ajoutons un <div>élément de bloc et lui donnons un ID afin que nous puissions le référencer plus tard :

<html lang="en">
  <head>
    <title>JavaScript Linear Gauge</title>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

Les attributs largeur et hauteur du <div>sont définis sur 100 % afin que le graphique soit restitué sur tout l'écran. Ces attributs peuvent être modifiés selon les besoins.

2. Incluez les fichiers JavaScript nécessaires

L'étape suivante consiste à référencer les liens JS dans la page HTML. Nous utiliserons la bibliothèque AnyChart pour ce didacticiel, incluons donc les fichiers correspondants à partir de leur CDN .

Pour créer un graphique à jauge linéaire, nous devrons ajouter trois scripts : le module de base , le module de jauge linéaire et le module de table :

<html lang="en">
  <head>
    <title>JavaScript Linear Gauge</title>
    <style type="text/css">
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      // All the code for the JS linear gauge will come here
    </script>
    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-linear-gauge.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-table.min.js"></script>
  </body>
</html>

3. Ajoutez les valeurs de données

Les données du graphique à jauge linéaire sont collectées à partir de Our World in Data et incluses dans le code. Sur ce site, on peut voir le pourcentage de personnes ayant reçu une et deux doses de vaccin Covid pour chaque continent dans le monde entier.

Parce que (au moment de la rédaction) aucun des nombres n'est supérieur à 50 %, nous avons maintenu la limite maximale de l'axe de toutes les jauges linéaires à 50 %, et nous comparons à quelle distance de cette marque se trouve chaque continent, ainsi que le chiffre global. Nous indiquons au moins les chiffres partiellement vaccinés avec une représentation LED, et les chiffres entièrement vaccinés avec un pointeur de barre. Nous verrons comment les données sont ajoutées dans la dernière étape.

Alors, nos premières étapes sont terminées, et maintenant ajoutons le code pour créer un graphique à jauge linéaire avec JavaScript !

4. Écrivez le code JavaScript du graphique

Avant d'ajouter du code, nous enfermons tout dans une fonction qui s'assure que tout le code qu'elle contient ne s'exécute qu'une fois la page chargée.

La création d'un graphique à jauge linéaire implique quelques étapes et est un peu plus complexe que les autres types de graphiques de base. Mais cela ne veut pas dire que c'est très difficile, et nous passerons par chaque étape pour comprendre comment le graphique est fait.

Définition de l'échelle linéaire et de l'axe du graphique de jauge

Nous avons plusieurs pointeurs dans notre graphique. Alors, commençons par créer une fonction qui accepte deux valeurs : une pour le pointeur de la barre et une pour la jauge LED. Nous allons ensuite créer une jauge, définir les données et spécifier la disposition horizontale. Ensuite, nous allons définir la plage des échelles et des axes. Nous allons créer une échelle linéaire avec les plages minimale et maximale. Pour l'axe, nous allons définir les attributs et définir l'orientation :

function drawGauge(value, settings) {
  // Create gauge with settings
  const gauge = anychart.gauges.linear();
  gauge.data([value, settings.value]);
  gauge.layout('horizontal');

  // Set scale for gauge
  const scale = anychart.scales.linear();
  scale.minimum(0).maximum(settings.maximum).ticks({ interval: 2 });

  // Set axis for gauge
  const axis = gauge.axis(0);
  axis.width('1%').offset('43%').scale(scale).orientation('bottom');
}

Réglage du pointeur de barre et de l'étiquette

Nous allons maintenant créer le pointeur de barre et l'étiquette de la série de barres. L'étiquette reçoit un décalage pour éviter le chevauchement avec le pointeur :

// Create and set bar point
const barSeries = gauge.bar(0);

barSeries
  .scale(scale)
  .width('4%');

// Create and set label with actual data
const labelBar = barSeries.labels();
labelBar
  .enabled(true)
  .offsetY('-15px');

Création du pointeur LED et définition de l'attribut de couleur

Dans les points LED, nous allons spécifier l'écart entre les points et utiliser la propriété dimmer pour définir la couleur des points LED résiduels pour indiquer un effet non éclairé. Nous déclarerons également l'échelle de couleur des points LED allumés :

// Create and set LED point
const ledPointer = gauge.led(1);

ledPointer
  .offset('10%')
  .width('30%')
  .count(settings.maximum)
  .scale(scale)
  .gap(0.55)
  .dimmer(function () {
    return '#eee';
  });

ledPointer.colorScale().colors(['#63b39b', '#63b39b']);

Déclarer les jauges avec la valeur cible de chaque point de données

Pour faire la jauge linéaire pour chaque continent, nous appellerons la fonction définie ci-dessus pour chaque région avec ses données. Le premier nombre indique les données de la valeur cible et la seconde variable est un objet avec les données de la LED. Le maximumreste une constante de 50, tandis que valuereprésente la valeur en pourcentage de la population entièrement vaccinée pour chaque point de données. Cette valeur sera affichée par le pointeur :

// Create gauges
const world = drawGauge(13.68, { maximum: 50, value: 27.13 });
const europe = drawGauge(36.98, { maximum: 50, value: 47.28 });
const nAmerica = drawGauge(36.77, { maximum: 50, value: 46.53 });
const sAmerica = drawGauge(22.8, { maximum: 50, value: 40.54 });
const asia = drawGauge(10.14, { maximum: 50, value: 27.16 });
const oceania = drawGauge(9.75, { maximum: 50, value: 22.12 });
const africa = drawGauge(1.56, { maximum: 50, value: 3.04 });

Réglage de la disposition des jauges linéaires

Pour afficher chacune des jauges linéaires l'une sous l'autre, nous allons définir un tableau et ajouter le titre avec chaque point de données sur une ligne distincte. Nous ajouterons les différentes propriétés de la mise en page, telles que l'alignement et la taille de la police. Nous allons également définir des paramètres pour la première ligne, puisqu'il s'agit du titre, et définir l'attribut width de la première colonne sur 100 % puisque nous n'avons plus besoin de colonnes :

// Create table to place gauges
const layoutTable = anychart.standalones.table();
layoutTable
  .hAlign('right')
  .vAlign('middle')
  .fontSize(14)
  .cellBorder(null);

// Put gauges into the layout table
layoutTable.contents([
  [null, 'Covid-19 Vaccination - How far are we from the halfway mark?'],
  ['World', world],
  ['Europe', europe],
  ['North America', nAmerica],
  ['South America', sAmerica],
  ['Asia', asia],
  ['Oceania', oceania],
  ['Africa', africa]
]);

// Set height for first row in layout table
layoutTable
  .getRow(0)
  .height(50)
  .fontSize(22)
  .hAlign('center');

// Set the first column to 100% width
layoutTable.getCol(0).width(100);

Dessiner le graphique

La dernière étape consiste à référencer le <div>conteneur que nous avons ajouté à l'étape précédente et à dessiner le graphique :

// Set container id and initiate drawing
layoutTable.container('container');
layoutTable.draw();

Et c'est tout. Nous avons maintenant un graphique de jauge linéaire JavaScript entièrement fonctionnel et magnifique ! Le code de cette version initiale de la jauge linéaire peut être consulté sur CodePen .

Version initiale de jauge linéaire

Rendre le graphique accessible

C'est toujours une bonne pratique de s'assurer que les graphiques sont accessibles au plus grand nombre. Donc, en gardant tout à l'esprit, nous avons créé une version de base du graphique à jauge linéaire qui convient mieux aux lecteurs d'écran. Vous pouvez vérifier cela ici et également en savoir plus sur cet aspect dans la documentation de la bibliothèque JavaScript AnyChart.

Personnalisation de la jauge linéaire

Le graphique à jauge linéaire par défaut que nous avons créé semble génial en ce moment, mais quelques modifications amélioreront la lisibilité et rendront le graphique encore plus impressionnant. Les bibliothèques JavaScript sont parfaites non seulement pour créer rapidement des graphiques, mais aussi pour personnaliser les visualisations selon les besoins. Les bibliothèques de graphiques offrent de nombreuses options de configuration pour contrôler le comportement et l'esthétique des graphiques. Apportons quelques modifications mineures mais efficaces à notre graphique à jauge linéaire actuel.

Changement de couleur

Pour rendre la jauge linéaire plus cohérente, faisons de l'attribut de couleur du pointeur de la barre une version plus sombre des points LED. Nous le ferons en spécifiant les attributs fill et stroke de la barre :

// Create and set bar point
const barSeries = gauge.bar(0);
barSeries
  .scale(scale)
  .width('4%')
  .fill('#296953')
  .stroke('#296953');

Ajout d'une légende à notre graphique à jauge linéaire

Étant donné que nous avons utilisé différentes couleurs pour la barre, les pointeurs LED allumés et non allumés, il est recommandé de fournir une légende pour expliquer les couleurs. Nous allons créer une légende et l'ajouter sous le titre du graphique :

// Create stand alone legend
const legend = anychart.standalones.legend();
legend
.position('center')
.items([
    { text: 'Fully vaccinated', iconFill: '#296953' },
    { text: 'Partially vaccinated', iconFill: '#63b39b' },
    { text: 'Not vaccinated', iconFill: '#eee' }
]);

Formatage des info-bulles

Pour faciliter une meilleure communication des données, formatons l'info-bulle pour la rendre plus informative en affichant les valeurs sous forme de pourcentage et en indiquant que la valeur maximale de la jauge est de 50 % :

// Set gauge tooltip
gauge
    .tooltip()
    .useHtml(true)
    .titleFormat('{%Value} %')
        .format(
        'Maximum on scale: ' +
        settings.maximum +
        ' %'
    );

Découvrez le code complet de cette version sur CodePen .

Formatage des axes et des étiquettes

La dernière chose que nous ferons est d'afficher toutes les valeurs de données sous forme de pourcentages pour éviter toute confusion. Nous ajouterons également un sous-titre sous forme de ligne dans le tableau sous le titre pour indiquer que les valeurs sont des pourcentages. Une dernière chose sera d'embellir les étiquettes des barres avec des polices plus audacieuses.

Version finale de la jauge linéaire

Le code final complet de ce graphique de jauge linéaire JavaScript peut être trouvé sur CodePen .

Conclusion

Dans ce tutoriel étape par étape, nous avons vu comment créer des graphiques JavaScript fonctionnels et visuellement attrayants n'est pas trop difficile avec une bonne bibliothèque JavaScript. Consultez la documentation et les exemples pour mieux comprendre les caractéristiques et les propriétés de la jauge linéaire. Veuillez poser des questions en cas de doute sur ce graphique ou d'autres visualisations.

Il existe plusieurs options de graphique fournies par AnyChart , et il existe également de nombreuses autres bibliothèques de graphiques JavaScript pour créer de belles visualisations.

Faisons tous vacciner et restons en bonne santé pour continuer à créer plus de visualisations !

 Source : https://www.sitepoint.com/create-linear-gauge-chart-javascript/

#javascript 

Rahul Jangid

1622207074

What is JavaScript - Stackfindover - Blog

Who invented JavaScript, how it works, as we have given information about Programming language in our previous article ( What is PHP ), but today we will talk about what is JavaScript, why JavaScript is used The Answers to all such questions and much other information about JavaScript, you are going to get here today. Hope this information will work for you.

Who invented JavaScript?

JavaScript language was invented by Brendan Eich in 1995. JavaScript is inspired by Java Programming Language. The first name of JavaScript was Mocha which was named by Marc Andreessen, Marc Andreessen is the founder of Netscape and in the same year Mocha was renamed LiveScript, and later in December 1995, it was renamed JavaScript which is still in trend.

What is JavaScript?

JavaScript is a client-side scripting language used with HTML (Hypertext Markup Language). JavaScript is an Interpreted / Oriented language called JS in programming language JavaScript code can be run on any normal web browser. To run the code of JavaScript, we have to enable JavaScript of Web Browser. But some web browsers already have JavaScript enabled.

Today almost all websites are using it as web technology, mind is that there is maximum scope in JavaScript in the coming time, so if you want to become a programmer, then you can be very beneficial to learn JavaScript.

JavaScript Hello World Program

In JavaScript, ‘document.write‘ is used to represent a string on a browser.

<script type="text/javascript">
	document.write("Hello World!");
</script>

How to comment JavaScript code?

  • For single line comment in JavaScript we have to use // (double slashes)
  • For multiple line comments we have to use / * – – * /
<script type="text/javascript">

//single line comment

/* document.write("Hello"); */

</script>

Advantages and Disadvantages of JavaScript

#javascript #javascript code #javascript hello world #what is javascript #who invented javascript

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

It is said that a digital resource a business has must be interactive in nature, so the website or the business app should be interactive. How do you make the app interactive? With the use of JavaScript.

Does your business need an interactive website or app?

Hire Dedicated JavaScript Developer from WebClues Infotech as the developer we offer is highly skilled and expert in what they do. Our developers are collaborative in nature and work with complete transparency with the customers.

The technology used to develop the overall app by the developers from WebClues Infotech is at par with the latest available technology.

Get your business app with JavaScript

For more inquiry click here https://bit.ly/31eZyDZ

Book Free Interview: https://bit.ly/3dDShFg

#hire dedicated javascript developers #hire javascript developers #top javascript developers for hire #hire javascript developer #hire a freelancer for javascript developer #hire the best javascript developers

joe biden

1617257581

Software de restauración de Exchange para restaurar sin problemas PST en Exchange Server

¿Quiere restaurar los buzones de correo de PST a Exchange Server? Entonces, estás en la página correcta. Aquí, lo guiaremos sobre cómo puede restaurar fácilmente mensajes y otros elementos de PST a MS Exchange Server.

Muchas veces, los usuarios necesitan restaurar los elementos de datos de PST en Exchange Server, pero debido a la falta de disponibilidad de una solución confiable, los usuarios no pueden obtener la solución. Háganos saber primero sobre el archivo PST y MS Exchange Server.

Conozca PST y Exchange Server

PST es un formato de archivo utilizado por MS Outlook, un cliente de correo electrónico de Windows y muy popular entre los usuarios domésticos y comerciales.

Por otro lado, Exchange Server es un poderoso servidor de correo electrónico donde todos los datos se almacenan en un archivo EDB. Los usuarios generalmente guardan la copia de seguridad de los buzones de correo de Exchange en el archivo PST, pero muchas veces, los usuarios deben restaurar los datos del archivo PST en Exchange. Para resolver este problema, estamos aquí con una solución profesional que discutiremos en la siguiente sección de esta publicación.

Un método profesional para restaurar PST a Exchange Server

No le recomendamos que elija una solución al azar para restaurar los datos de PST en Exchange Server. Por lo tanto, al realizar varias investigaciones, estamos aquí con una solución inteligente y conveniente, es decir, Exchange Restore Software. Es demasiado fácil de manejar por todos los usuarios y restaurar cómodamente todos los datos del archivo PST a Exchange Server.

Funciones principales ofrecidas por Exchange Restore Software

El software es demasiado simple de usar y se puede instalar fácilmente en todas las versiones de Windows. Con unos pocos clics, la herramienta puede restaurar los elementos del buzón de Exchange.

No es necesario que MS Outlook restaure los datos PST en Exchange. Todos los correos electrónicos, contactos, notas, calendarios, etc. se restauran desde el archivo PST a Exchange Server.

Todas las versiones de Outlook son compatibles con la herramienta, como Outlook 2019, 2016, 2013, 2010, 2007, etc. La herramienta proporciona varios filtros mediante los cuales se pueden restaurar los datos deseados desde un archivo PST a Exchange Server. El programa se puede instalar en todas las versiones de Windows como Windows 10, 8.1, 8, 7, XP, Vista, etc.

Descargue la versión de demostración del software de restauración de Exchange y analice el funcionamiento del software restaurando los primeros 50 elementos por carpeta.

Líneas finales

No existe una solución manual para restaurar los buzones de correo de Exchange desde el archivo PST. Por lo tanto, hemos explicado una solución fácil e inteligente para restaurar datos de archivos PST en Exchange Server. Simplemente puede usar este software y restaurar todos los datos de PST a Exchange Server.

Más información:- https://www.datavare.com/software/exchange-restore.html

#intercambio de software de restauración #intercambio de restauración #buzón del servidor de intercambio #herramienta de restauración de intercambio

Niraj Kafle

1589255577

The essential JavaScript concepts that you should understand

As a JavaScript developer of any level, you need to understand its foundational concepts and some of the new ideas that help us developing code. In this article, we are going to review 16 basic concepts. So without further ado, let’s get to it.

#javascript-interview #javascript-development #javascript-fundamental #javascript #javascript-tips