Comenzando con amcharts

Introducción

Antes de que pueda usar amCharts, deberá incluir las bibliotecas de JavaScript requeridas.

Hay una biblioteca principal que se requiere para todas las operaciones de amCharts: amcharts.js. Debe incluirse primero y es obligatorio.

Cada tipo de gráfico requiere una inclusión específica del tipo de gráfico. Por ejemplo, el gráfico en serie también requerirá serial.js, un gráfico circular necesitará pie.js, etc.

Si en la misma página web va a mostrar varios tipos de gráficos diferentes, deberá incluir todas las inclusiones específicas del tipo de gráfico que se muestran en esa página.

Crear un gráfico

El gráfico consiste en un contenedor HTML y el código JavaScript que instancia un gráfico en él.

HTML

Usamos un elemento <div> como contenedor de gráfico.

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

JavaScript

Para instanciar el gráfico usamos la función AmCharts.makeChart(). El primer parámetro es una identificación del contenedor para colocar el gráfico, el segundo un objeto con la configuración del gráfico.

Como mínimo, debe contener el parámetro ’tipo’, que contiene el tipo de gráfico.

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"
});

Cargando desde amCharts CDN

AmCharts proporciona un CDN confiable y con equilibrio de carga para cargar las bibliotecas directamente desde nuestro servidor web. Utilice https://www.amcharts.com/lib/3/ como URL base para las inclusiones.

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

Cargando bibliotecas desde su propio servidor

Para hacer eso, descargar un archivo ZIP del producto amCharts requerido.

Descomprímalo y colóquelo en algún lugar de su servidor web. Es decir. en el subdirectorio /amcharts/.

Luego simplemente cárguelos usando las etiquetas <script>:

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

Incluye adicional

Además de las principales funciones requeridas, es posible que necesite otras funciones, como temas y complementos. Estos residen en los subdirectorios /themes/ y /plugins/ respectivamente.

Es decir.:

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