Visualisation des données : comment créer des chandeliers de crypto-monnaie stylisés avec des Highcharts

Qu’est-ce que la visualisation de données ?

La visualisation des données est la pratique consistant à représenter des données/informations sous des formats picturaux ou graphiques. Il s'agit d'un moyen par lequel de grands ensembles de données ou de mesures sont convertis en éléments visuels tels que des cartes, des graphiques et des diagrammes, qui sont beaucoup plus attrayants pour un utilisateur final.

L'écosystème JavaScript dispose actuellement de plusieurs bibliothèques fiables et de premier ordre pour la visualisation de données. Certains d'entre eux incluent D3.js, Highcharts, Charts.js, Rechart, etc. Cependant, dans cet article, nous utiliserons Highcharts pour créer nos graphiques.

---

Highcharts est une bibliothèque JavaScript permettant de créer des graphiques SVG, réactifs et interactifs pour le Web et les mobiles. Il permet une personnalisation approfondie des graphiques via JavaScript ou CSS. Highcharts propose quatre catégories de produits pour créer des graphiques. Ceux-ci incluent :

• Highcharts : Il s'agit du module Highcharts de base qui est requis dans tous les graphiques. Il peut être utilisé pour créer des graphiques simples, linéaires, à barres et circulaires.
• Highcharts Stock : Ceci est utilisé pour créer des graphiques généraux de stock et de chronologie pour vos applications. Quelques exemples incluent de simples graphiques boursiers, des chandeliers et Heikin-Ashi, OHLC. Vous pouvez également utiliser le module Stock Tools qui fournit une interface graphique permettant d'interagir avec les graphiques.
• Cartes Highcharts : Highcharts fournit également une option pour générer des cartes schématiques qui permettent aux développeurs d'ajouter des cartes interactives et personnalisables à leur application Web. Il offre des options pour utiliser la collection de cartes fournie par Highcharts ou créer des cartes SVG personnalisées en fonction de vos besoins.
• Highcharts Gantt : Il s'agit d'un type spécial de diagramme à barres utilisé pour illustrer les calendriers de projets.

Nous utiliserons le Highcharts Stock pour créer des chandeliers stylisés avec des oscillateurs et des indicateurs techniques fournis par le module Stock Tools.

Créer le chandelier

Un graphique en chandeliers (ou graphique en chandeliers japonais) est un style de graphique financier utilisé par les traders pour déterminer les mouvements possibles des prix d'une action, d'un titre ou d'une devise en fonction de modèles précédents. Il utilise des niveaux de prix clés/valeurs OHLC (ouverture, haut, bas, clôture) prises à intervalles réguliers pendant une période de temps spécifiée.

À ne pas confondre avec le graphique en chandeliers typique est le graphique Heikin-Ashi (« barre moyenne »). Bien qu'identique au graphique en chandelier, il est principalement utilisé conjointement avec le chandelier car il facilite l'analyse des tendances du graphique en chandelier. Cela le rend donc plus lisible.

L'API Highcharts fournit des options pour créer à la fois des graphiques en chandeliers et des graphiques Heikin-Ashi. Cet article se concentre sur les graphiques en chandeliers ; cependant, je soulignerai les compromis nécessaires à la création d'un graphique Heikin-Ashi en cours de route. Mettons-nous la main à la pâte, d'accord ?!

Commencer

Pour commencer à utiliser Highcharts, nous devons d'abord télécharger Highcharts. Highcharts propose plusieurs options pour introduire Highcharts dans votre projet. Vous pouvez choisir soit :

• Téléchargez toute la bibliothèque Highcharts. Selon votre cas d'utilisation, vous pouvez également télécharger les bibliothèques Highcharts Stock, Maps ou Gantt.
• Installez Highcharts via NPM et importez en tant que modules. Ce sont les meilleurs pour les applications à page unique comme React et Vue.
• Utilisez le CDN Highcharts pour accéder directement aux fichiers.

Nous utiliserons le CDN Highcharts pour cet article.

Le HTML

La majeure partie du code HTML contient des balises de script utilisées pour charger le CDN Highcharts. Les trois premiers sont des modules obligatoires pour tous les graphiques boursiers créés avec Highcharts.

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

Contrairement aux graphiques en chandeliers, si vous devez créer un graphique Heikin-Ashi, vous devrez importer le module séparément comme ci-dessous :

<script src="https://code.highcharts.com/stock/modules/heikinashi.js"></script>

Le CDN final que nous devons intégrer à notre application est le module Stock Tools. Cela nous permet d’utiliser des indicateurs techniques. Le module Stock Tools doit être chargé en dernier afin qu'il puisse récupérer tous les modules disponibles ci-dessus.

<script src="https://code.highcharts.com/stock/indicators/indicators-all.js"></script>

Plutôt que de charger tous les indicateurs techniques depuis le module Stock Tools, vous pouvez également charger des indicateurs spécifiques en fonction de vos besoins :

<script src="https://code.highcharts.com/indicators/indicators.js"></script>
<script src="https://code.highcharts.com/indicators/rsi.js"></script>
<script src="https://code.highcharts.com/indicators/ema.js"></script>
<script src="https://code.highcharts.com/indicators/macd.js"></script>

Enfin, nous devons créer un élément HTML pour contenir notre graphique que nous pouvons référencer à partir du JavaScript :

<div>



<h3>
  
  
  The JavaScript
</h3>

<p><strong>Bringing in our Data</strong><br>
The first item on our itinerary is to bring in the data we will be plotting. Highcharts provides a .getJSON method similar to that of jQuery, which is used for making HTTP requests. It also provides a stockChart class for creating the chart. The stockChart class takes in two parameters:</p>

• The first parameter, renderTo, is the DOM element or the id of the DOM element to which the chart should render.
• The second parameter, options, are the options that structure the chart.

Highcharts.getJSON('https://api.coingecko.com/api/v3/coins/ethereum/ohlc?vs_currency=usd&days=365', 
function (candlestick) {
  // create the chart
  Highcharts.stockChart('container', {
    title: {
      text: 'Untitled Masterpiece'
    },

    series: [
      {
        type: "candlestick",    //heikinashi for Heikin-Ashi chart
        name: "Ethereum",      //chart name
        id: "eth",             // chart id, useful when adding indicators and oscillators
        data: candlestick,      //data gotten from the API call above
      },
    ], 

yAxis: [
      {
        height: "100%",       // height of the candlestick chart
        visible: true,  
      }
    ]
  });
});

Le code ci-dessus nous donne un chandelier simple avec un style de base fourni par Highcharts.

Outils de stock

Les outils de stock Highcharts sont une fonctionnalité facultative dans Highcharts. Vous pouvez soit activer l'intégralité de l'interface utilisateur graphique (GUI) de Stock Tools, qui permet aux utilisateurs d'ajouter des indicateurs et des oscillateurs en fonction de leurs besoins, soit ajouter des outils de stock spécifiques à votre application Web via Javascript.

Nous ajouterons un indicateur (bandes d'accélération) et un oscillateur (oscillateur génial) à notre graphique. Pour ce faire, nous devons éditer à la fois les objets série et yAxis ci-dessus :

series: [
      {
        type: "candlestick",
        name: "Ethereum",
        id: "eth",           // chart id, useful when adding indicators and oscillators
        data: data,
      },
         {
        type: "abands",      //acceleration bands indicator
        id: "overlay",       // overlays use the same scale and are plotted on the same axes as the main series.
        linkedTo: "eth",    //targets the id of the data series that it points to
        yAxis: 0,           // the index of yAxis the particular series connects to
      },
      {
        type: "ao",          // awesome oscillator
        id: "oscillator",    // oscillators requires additional yAxis be created due to different data extremes.
        linkedTo: "eth",    //targets the id of the data series that it points to
        yAxis: 1,           // the index of yAxis the particular series connects to
      },
    ],
    yAxis: [
      {
        //index 0
        height: "80%",      //height of main series 80%

        resize: {
          enabled: true,     // allow resize of chart heights
        },
      },
      {
        //index 1
        top: "80%",         // oscillator series to begin at 80%
        height: "20%",      //height of oscillator series
      },
    ],

Voici ce que nous avons maintenant :

Styliser le graphique

Avant de pouvoir commencer à styliser le graphique, nous devons d'abord comprendre les différentes parties qui composent le graphique.

Highcharts propose deux manières de styliser les graphiques :

• Highcharts.CSSObject : Il s'agit de la méthode par défaut de style des graphiques. Il s'appuie sur l'objet options de la classe stockChart fourni par Highcharts pour définir l'apparence visuelle des éléments SVG et HTML individuels dans le graphique.
• styledMode : boolean : la valeur par défaut est false. Cependant, en mode stylisé, aucun attribut de présentation n'est appliqué au SVG via l'objet options. Par conséquent, des règles CSS sont nécessaires pour styliser le graphique.

Nous utiliserons le style par défaut de Highcharts pour cet article. Par conséquent, dans l'objet options :

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

Voici ce que devient notre tableau final :

Conclusion

Créer des chandeliers de crypto-monnaie stylisés avec Highcharts vous permet de transformer des données brutes en informations visuellement convaincantes et exploitables. En tirant parti de la flexibilité de Highcharts, vous pouvez personnaliser les graphiques en chandeliers pour les aligner sur votre image de marque, améliorer l'expérience utilisateur et communiquer efficacement les tendances du marché. Qu'il s'agisse de créer un tableau de bord financier ou d'améliorer une plateforme de trading, la capacité à concevoir et à mettre en œuvre des visualisations personnalisées est une compétence essentielle dans le paysage actuel axé sur les données.

Avec les étapes décrites dans ce guide, vous disposez désormais d'une base pour travailler avec Highcharts afin de créer des graphiques en chandeliers dynamiques. Explorez des personnalisations supplémentaires et expérimentez l'API étendue de Highcharts pour faire passer vos visualisations de crypto-monnaie au niveau supérieur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!