amchartsAan de slag met amcharts


Opmerkingen

amCharts is een set op JavaScript gebaseerde datavisualisatiebibliotheken met reguliere grafiektypen zoals Serial, Pie, etc. evenals geavanceerde zoals Stock-grafieken en kaarten.

Intro

Voordat u amCharts kunt gebruiken, moet u de vereiste JavaScript-bibliotheken opnemen.

Er is één hoofdbibliotheek vereist voor alle bewerkingen van amCharts - amcharts.js . Het moet eerst worden opgenomen en is verplicht.

Elk diagramtype vereist een specifiek diagramtype. Serial chart heeft bijvoorbeeld ook serial.js nodig, een cirkeldiagram pie.js , enz.

Als u op dezelfde webpagina verschillende grafiektypen wilt weergeven, moet u alle grafiektype-specifieke kenmerken opnemen die op die pagina worden weergegeven.

Extra omvat

Naast de belangrijkste vereiste functionele omvat, hebt u mogelijk ook andere omvat, zoals thema's en plug-ins. Deze bevinden zich respectievelijk in / thema's / en / plug - ins / submappen.

D.w.z:

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

Een grafiek maken

De grafiek bestaat uit een HTML-container en de JavaScript-code die een grafiek erin instantieert.

HTML

We gebruiken een <div> -element als diagramcontainer.

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

JavaScript

Om de grafiek te instantiëren, gebruiken we de functie AmCharts.makeChart() . De eerste parameter is een ID van de container waarin de grafiek moet worden geplaatst, de tweede een object met grafiekconfiguratie.

Het moet ten minste de parameter type bevatten, die het diagramtype bevat.

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

Laden van amCharts CDN

AmCharts biedt een load-balanced, betrouwbare CDN voor het laden van de bibliotheken rechtstreeks vanaf onze webserver. Gebruik https://www.amcharts.com/lib/3/ als basis-URL voor omvat.

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

Bibliotheken laden van uw eigen server

Om dit te doen, [download] [1] een vereist ZIP-archief van het amCharts-product.

Pak het uit en plaats het ergens op uw webserver. Dat wil zeggen in / amcharts / subdirectory.

Laad ze vervolgens eenvoudig met de tags <script> :

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