Comment créer des graphiques évolutifs à l'aide de Highcharts

Comment créer des graphiques évolutifs à l'aide de Highcharts

Présentation :
Highcharts est une puissante bibliothèque de graphiques JavaScript qui peut être utilisée pour créer une variété de graphiques interactifs dans des sites Web ou des applications. Dans cet article, nous nous concentrerons sur la façon de créer des graphiques évolutifs à l'aide de Highcharts. Un graphique zoomable signifie que les utilisateurs peuvent utiliser des gestes ou des clics pour zoomer ou dézoomer sur le graphique afin d'afficher les données plus en détail ou à un niveau plus général. Nous utiliserons un exemple de code pour illustrer comment configurer et utiliser la bibliothèque Highcharts pour obtenir cette fonctionnalité.

Étapes :

1. Introduire la bibliothèque Highcharts
   Tout d'abord, nous devons introduire la bibliothèque Highcharts dans la page HTML. Vous pouvez télécharger la bibliothèque Highcharts depuis le site officiel de Highcharts, puis l'introduire dans la balise

   de la page HTML, comme indiqué ci-dessous :

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

   De plus, si vous devez utiliser la fonction d'exportation de Highcharts, vous il faut également introduire le module d'exportation :

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

2. Créer un conteneur
   Ensuite, nous devons créer un conteneur dans la page HTML pour placer le graphique. Un conteneur vide avec un identifiant unique peut être créé à l'aide d'un élément

    :

   <div id="chart-container"></div>

3. Définir la configuration du graphique
   En JavaScript, nous devons fournir certaines options de configuration pour les graphiques Highcharts. L'exemple de code suivant montre comment définir la configuration du graphique et créer un graphique linéaire évolutif simple :

// 设置图表配置
var options = {
  chart: {
    type: 'line',
    zoomType: 'x',  // 开启x轴缩放
  },
  title: {
    text: '可缩放折线图'
  },
  xAxis: {
    type: 'datetime'  // x轴类型为日期时间
  },
  yAxis: {
    title: {
      text: '值'
    }
  },
  series: [{
    data: [5, 10, 15, 20, 25]  // 图表数据
  }]
};

// 创建图表
Highcharts.chart('chart-container', options);

Dans l'exemple de code ci-dessus, nous avons défini le type de graphique sur un graphique linéaire et activé la mise à l'échelle de l'axe X. Les données du graphique se trouvent dans le tableau de données sous série.

4. Ajouter une fonction de zoom gestuel
   Highcharts fournit un module appelé "mobile.js", qui peut prendre en charge la fonction de zoom gestuel sur les appareils mobiles. Il suffit d'introduire ce module lors de l'introduction de la bibliothèque Highcharts pour activer la fonction de zoom gestuel :

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

   Après l'introduction, Highcharts détectera automatiquement le type d'appareil auquel vous accédez et activera les fonctions interactives correspondantes.

5. Options de mise à l'échelle personnalisées
   En plus de la fonction de mise à l'échelle par défaut de l'axe X, Highcharts nous permet également de personnaliser les options de mise à l'échelle. En modifiant les propriétés minRange et maxRange de l'objet xAxis dans les options, vous pouvez définir les valeurs de plage minimale et maximale pour la mise à l'échelle de l'axe X. Par exemple, si nous voulons limiter le zoom sur l'axe des x entre 1 heure et 30 jours, nous pouvons ajouter le code suivant :

   xAxis: {
     type: 'datetime',
     minRange: 3600 * 1000,  // 1小时
     maxRange: 30 * 24 * 3600 * 1000  // 30天
   },

   Après avoir défini cela, lorsque l'utilisateur effectue une opération de zoom sur le graphique, la plage du L'axe des x sera limité à ce qui est spécifié dans la plage.

Résumé :
Avec les étapes ci-dessus, nous pouvons créer un graphique zoomable à l'aide de Highcharts. Tout d’abord, nous devons introduire la bibliothèque Highcharts et créer un conteneur pour contenir le graphique. Ensuite, définissez les options de configuration du graphique en fonction de vos besoins, y compris le type de graphique, les paramètres des axes X et Y et les données du graphique. Ensuite, le module mobile.js peut être introduit pour activer la fonctionnalité de zoom gestuel sur les appareils mobiles. Enfin, les options de configuration personnalisées nous permettent de contrôler davantage les détails du comportement de mise à l'échelle. J'espère que cet article vous aidera à créer des graphiques évolutifs avec Highcharts !

Le code est la clé pour maîtriser les compétences, il est donc recommandé qu'après avoir compris les connaissances théoriques, vous essayiez d'utiliser Highcharts pour créer vous-même des graphiques évolutifs pour de meilleurs résultats d'apprentissage.