highchartsDémarrer avec les highcharts


Remarques

Highcharts est une bibliothèque de codes JavaScript pouvant être configurée à l'aide des options au format JSON. Il prend en charge un large éventail de types de graphiques par défaut, et permet également des plug-ins. C'est aussi le noyau de plusieurs produits secondaires comme Highstock et Highmaps.

Highcharts est gratuit pour un usage non commercial et personnel, avec des licences uniquement nécessaires pour les applications commerciales.

Versions

Version Date de sortie
5.0.0 2016-09-29
4.0.0 2014-04-22
3.0.0 2013-03-22
2.0.0 2010-07-13
1.0.0 2009-11-27

Couleurs

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

Les couleurs par défaut pour les versions 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 la version 1.6+ pour les navigateurs existants, et 2.0+ pour les navigateurs modernes.

Bonjour le monde

Commencez par inclure highcharts.js dans votre index.html

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

Ajouter 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 la carte? - chart.renderTo

  • Quelles sont les données à tracer? - Il existe plusieurs moyens d’alimenter les données à tracer; le plus commun d'entre eux étant l'objet série .

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

Cela crée un complot comme suit - violon .

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

  • chart.type - Quel type de graphique voulez-vous tracer?
  • title - Configuration du titre du graphique
  • xAxis / yAxis - Configuration pour l'axe x / axe y du graphique

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

    <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>
 

Exemple JSFiddle

Un bon endroit pour commencer dans le document Highcharts serait ici .

Installation ou configuration

Façons d'obtenir des Highcharts:

npm install highcharts
 
  • Par bower;
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. Toutefois, si vous disposez de graphiques spécifiques qui fonctionnent mieux avec une version donnée ou si vous souhaitez optimiser les performances de votre site Web, vous pouvez envisager de stocker les fichiers localement.

Les ressources suivantes fournissent 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 diagrammes au-delà de l'installation par défaut.