highchartsAan de slag met highcharts


Opmerkingen

Highcharts is een JavaScript- kaartbibliotheek die kan worden ingesteld met opties in JSON-indeling. Het ondersteunt standaard een breed scala aan grafiektypen en biedt ook plug-ins. Het is ook de kern voor verschillende bijproducten zoals Highstock en Highmaps.

Highcharts is gratis voor niet-commercieel en persoonlijk gebruik, met licenties die alleen nodig zijn voor commerciële toepassingen.

versies

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

kleuren

In Highcharts is er een array met de standaardkleuren voor de reeks van het diagram. Wanneer alle kleuren zijn gebruikt, worden nieuwe kleuren vanaf het begin opnieuw getekend.

De standaardkleuren voor versie 4.x en 5.x zijn:

colors: [
    '#7cb5ec', 
    '#434348', 
    '#90ed7d', 
    '#f7a35c', 
    '#8085e9', 
    '#f15c80', 
    '#e4d354', 
    '#2b908f', 
    '#f45b5b', 
    '#91e8e1'
]
 

In Highcharts 3.x waren de standaardkleuren:

colors: [
    '#2f7ed8', 
    '#0d233a', 
    '#8bbc21', 
    '#910000', 
    '#1aadce', 
    '#492970', 
    '#f28f43', 
    '#77a1e5', 
    '#c42525', 
    '#a6c96a'
 

]

In Highcharts 2.x waren de standaardkleuren:

colors: [
    '#4572A7', 
    '#AA4643', 
    '#89A54E', 
    '#80699B', 
    '#3D96AE', 
    '#DB843D', 
    '#92A8CD', 
    '#A47D7C', 
    '#B5CA92'
]
 

Compatibiliteit

Merk Ondersteunde versies
Internet Explorer 6.0 +
Firefox 2.0 +
Chrome 1,0 +
Safari 4.0 +
Opera 9.0 +
iOS (Safari) 3.0 +
Android-browser 2.0 +

Highcharts ondersteunt jQuery versie 1.6+ voor oudere browsers en 2.0+ voor moderne browsers.

Hallo Wereld

Begin met het opnemen van highcharts.js in uw index.html

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

Voeg een <div> om uw grafiek te bevatten

  <body>
    <div id="chart">
      <!-- Chart goes here -->
    </div>
 

Geef de configuratie op om de grafiek te maken. De mininum-configuratie die nodig is om een grafiek te maken is -

  • Waar gaat de grafiek heen? - chart.renderTo

  • Welke gegevens moeten worden uitgezet? - Er zijn een paar manieren om in te voeren gegevens in te voeren; de meest voorkomende onder hen is de serie object.

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

Dit maakt een plot als volgt - viool .

Er zijn tal van configuratie-opties die aan de grafiek kunnen worden toegevoegd, een paar veel voorkomende,

  • chart.type - Welk type grafiek wilt u plotten?
  • titel - Configuratie voor de titel van de grafiek
  • xAxis / yAxis - Configuratie voor de x-as / y-as van de grafiek

Een complete lijst met alle configuratie-opties vindt u hier .

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

JSFiddle-voorbeeld

Een goede plek om te beginnen in de Highcharts-doc zou hier zijn .

Installatie of instellingen

Manieren om Highcharts te krijgen:

npm install highcharts
 
  • Door prieel;
bower install highcharts
 

Om de hoofdbibliotheek van het CDN van de leverancier te laden, voegt u eenvoudig het volgende aan uw code toe:

<script src="https://code.highcharts.com/highcharts.js"></script>
 

Aanvullende bibliotheken, zoals de exportmodule, moeten na uw aangifte highcharts.js worden geladen.

Als u de bibliotheken rechtstreeks vanuit Highcharts belt, krijgt u de meest actuele versie. Als u echter specifieke grafieken hebt die het beste werken met een bepaalde versie of als u de prestaties van uw website wilt optimaliseren, kunt u overwegen de bestanden lokaal op te slaan.

De volgende bronnen bieden gedetailleerde informatie over het installeren en configureren van Highcharts, evenals aanvullende bibliotheken en modules die u kunt gebruiken om uw kaarten aan te passen buiten de standaardinstallatie.