Premiers pas avec les amcharts

## Introduction Avant de pouvoir utiliser amCharts, vous devrez inclure les bibliothèques JavaScript requises.

Il existe une bibliothèque principale requise pour toutes les opérations amCharts : amcharts.js. Il doit être inclus en premier et est obligatoire.

Chaque type de graphique nécessite une inclusion spécifique au type de graphique. Par exemple, un graphique en série nécessitera également serial.js, un graphique à secteurs aura besoin de pie.js, etc.

Si, sur la même page Web, vous affichez plusieurs types de graphiques différents, vous devrez inclure toutes les inclusions spécifiques au type de graphique qui sont affichées sur cette page.

Création d’un graphique #

Le graphique se compose d’un conteneur HTML et du code JavaScript qui y instancie un graphique.

HTML #

Nous utilisons un élément <div> comme conteneur de graphique.

<div id="chartdiv" style="height: 300px;"></div>

Javascript #

Pour instancier le graphique, nous utilisons la fonction AmCharts.makeChart(). Le premier paramètre est un identifiant du conteneur dans lequel placer le graphique, le second un objet avec la configuration du graphique.

À tout le moins, il doit contenir le paramètre type, qui contient le type de graphique.

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "dataProvider": [{
    "country": "USA",
    "visits": 2025
  }, {
    "country": "China",
    "visits": 1882
  }, {
    "country": "Japan",
    "visits": 1809
  }, {
    "country": "Germany",
    "visits": 1322
  }, {
    "country": "UK",
    "visits": 1122
  }, {
    "country": "France",
    "visits": 1114
  }, {
    "country": "India",
    "visits": 984
  }],
  "graphs": [{
    "fillAlphas": 0.9,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "visits"
  }],
  "categoryField": "country"
});

Chargement depuis amCharts CDN #

AmCharts fournit un CDN fiable et à charge équilibrée pour charger les bibliothèques directement à partir de notre serveur Web. Utilisez https://www.amcharts.com/lib/3/ comme URL de base pour les inclusions.

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>

Chargement des bibliothèques depuis votre propre serveur #

Pour ce faire, [téléchargez][1] une archive ZIP du produit amCharts requise.

Décompressez-le et placez-le quelque part sur votre serveur Web. C’est à dire. dans le sous-répertoire /amcharts/.

Ensuite, chargez-les simplement à l’aide des balises <script> :

<script src="amcharts/amcharts.js"></script>
<script src="amcharts/serial.js"></script>

## Inclus supplémentaires Outre les principales inclusions fonctionnelles requises, vous aurez peut-être besoin d’autres inclusions, telles que des thèmes et des plugins. Ceux-ci résident respectivement dans les sous-répertoires /themes/ et /plugins/.

C’est à dire.:

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>

[1] : https://www.amcharts.com/download/