Débuter avec les highcharts

Installation ou configuration

Façons d’obtenir Highcharts :

  • Charger directement depuis [Highcharts CDN][1]

  • [Télécharger][2] fichiers depuis le site officiel.

  • Via npm ;

    npm install highcharts

  • Par tonnelle;

    bower install highcharts

Pour charger la bibliothèque principale à partir du CDN du fournisseur, ajoutez simplement ce qui suit à votre code :

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

Les bibliothèques supplémentaires, telles que le module d’exportation, doivent être chargées après votre déclaration highcharts.js.

Appeler les bibliothèques directement depuis Highcharts vous fournira la version la plus récente. Cependant, si vous avez des graphiques spécifiques qui fonctionnent mieux avec une certaine version ou si vous souhaitez optimiser les performances de votre site Web, vous pouvez envisager de stocker les fichiers localement.

Les ressources suivantes offrent des informations détaillées sur l’installation et la configuration de Highcharts, ainsi que des bibliothèques et des modules supplémentaires que vous pouvez utiliser pour personnaliser vos graphiques au-delà de l’installation par défaut.

  • [Instructions d’installation pour Highcharts][3]
  • [Aperçu du module d’exportation][4]
  • [Service de fichiers Highcharts, y compris tous les modules et versions][1]

[1] : https://code.highcharts.com/ [2] : http://www.highcharts.com/download [3] : http://www.highcharts.com/docs/getting-started/installation [4] : http://www.highcharts.com/docs/export-module/export-module-overview

Bonjour le monde

Commencez par inclure highcharts.js dans votre index.html

<html>
  <head>
    <script src="http://code.highcharts.com/highcharts.js"></script>
  </head>

Ajoutez un <div> pour contenir votre graphique

  <body>
    <div id="chart">
      <!-- Chart goes here -->
    </div>

Spécifiez la configuration pour créer le graphique. La configuration minimale requise pour créer un graphique est -

  • Où va le graphique ? - [chart.renderTo] [1]

  • Quelles sont les données à tracer ? - Il existe [quelques manières][2] d’introduire les données à tracer ; le plus courant d’entre eux étant l’objet [series][3].

      var chartOptions = {
      chart: {
          renderTo: 'chart'  
      },
      series: [{      
          data: [1, 2]
      }]  
  };
  var chartHandle = Highcharts.Chart(chartOptions);

Cela crée un tracé comme suit - [violon] [4].

Il existe de nombreuses options de configuration qui peuvent être ajoutées au tableau, quelques-unes courantes étant,

  • [chart.type][5] - Quel type de graphique souhaitez-vous tracer ?
  • [title][6] - Configuration pour le titre du graphique
  • [xAxis/yAxis][7] - Configuration de l’axe x/y du graphique

Une liste complète de toutes les options de configuration peut être trouvée [ici][8].

    <script>
    var chartOptions = {
      chart: {
        renderTo: 'chart',
        type: 'bar'
      },
      title: {
        text: 'Hello Highcharts'
      },
      xAxis: {
        categories: ['Hello', 'World']
      },
      yAxis: {
        title: 'Value'
      },
      series: [{
        name: 'Highcharts Intro',
        data: [1, 2]
      }]
    };

    var chart = new Highcharts.Chart(chartOptions);
    
    </script>
  </body>
</html>

[JSFMoyen Exemple][9]

Un bon point de départ dans la doc Highcharts serait [ici][10].

[1] : http://api.highcharts.com/highcharts/chart.renderTo [2] : http://www.highcharts.com/docs/working-with-data/data-intro [3] : http://www.highcharts.com/docs/chart-concepts/series [4] : https://jsfiddle.net/bbd0m74f/ [5] : http://www.highcharts.com/docs/chart-and-series-types/chart-types [6] : http://www.highcharts.com/docs/chart-concepts/title-and-subtitle [7] : http://www.highcharts.com/docs/chart-concepts/axes [8] : http://api.highcharts.com/highcharts/ [9] : https://jsfiddle.net/q2cn88wo/9/ [10] : http://www.highcharts.com/docs/chart-concepts/understanding-highcharts

Couleurs

Dans Highcharts, il existe un tableau contenant les couleurs par défaut pour la série du graphique. Lorsque toutes les couleurs sont utilisées, les nouvelles couleurs sont à nouveau extraites du début.

Les couleurs par défaut pour version 4.x et 5.x sont :

colors: [
    '#7cb5ec', 
    '#434348', 
    '#90ed7d', 
    '#f7a35c', 
    '#8085e9', 
    '#f15c80', 
    '#e4d354', 
    '#2b908f', 
    '#f45b5b', 
    '#91e8e1'
]

Dans Highcharts 3.x, les couleurs par défaut étaient :

colors: [
    '#2f7ed8', 
    '#0d233a', 
    '#8bbc21', 
    '#910000', 
    '#1aadce', 
    '#492970', 
    '#f28f43', 
    '#77a1e5', 
    '#c42525', 
    '#a6c96a'

]

Dans Highcharts 2.x, les couleurs par défaut étaient :

colors: [
    '#4572A7', 
    '#AA4643', 
    '#89A54E', 
    '#80699B', 
    '#3D96AE', 
    '#DB843D', 
    '#92A8CD', 
    '#A47D7C', 
    '#B5CA92'
]

Compatibilité

Marque Versions prises en charge
Internet Explorer 6.0 +
Firefox 2.0 +
Chrome 1.0 +
safari 4.0 +
Opéra 9.0 +
iOS (Safari) 3.0 +
Navigateur Android 2.0 +

Highcharts prend en charge jQuery version 1.6+ pour les anciens navigateurs et 2.0+ pour les navigateurs modernes navigateurs.

Crédits →