amchartsDémarrer avec amcharts


Remarques

amCharts est un ensemble de bibliothèques de visualisation de données basées sur JavaScript qui inclut des types de graphiques standard tels que Serial, Pie, etc.

Introduction

Avant de pouvoir utiliser amCharts, vous devez inclure les bibliothèques JavaScript requises.

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

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

Si, sur la même page Web, vous affichez plusieurs types de graphiques différents, vous devez inclure tous les éléments spécifiques au type de graphique affichés sur cette page.

Comprend en plus

Outre les principaux composants fonctionnels requis, vous pouvez avoir besoin d'autres éléments, tels que des thèmes et des plug-ins. Ceux-ci résident respectivement dans / themes / et / plugins / sous-répertoires.

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>
 

Créer un graphique

Le graphique est constitué d'un conteneur HTML et du code JavaScript qui 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 une configuration graphique.

Au minimum, 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 depuis 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 de bibliothèques depuis votre propre serveur

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

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

Ensuite, il suffit de les charger en utilisant les balises <script> :

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