highchartsIniziare con i grafici highcharts


Osservazioni

Highcharts è una libreria di grafici JavaScript che può essere impostata utilizzando le opzioni in formato JSON. Supporta un'ampia gamma di tipi di grafici per impostazione predefinita e consente anche plug-in. È anche il nucleo di numerosi prodotti collaterali come Highstock e Highmaps.

Highcharts è gratuito per uso non commerciale e personale, con licenze necessarie solo per applicazioni commerciali.

Versioni

Versione Data di rilascio
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

Colori

In Highcharts , c'è una matrice contenente i colori predefiniti per le serie del grafico. Quando tutti i colori sono utilizzati, i nuovi colori vengono estratti di nuovo dall'inizio.

I colori predefiniti per la versione 4.xe 5.x sono:

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

In Highcharts 3.x , i colori predefiniti erano:

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

]

In Highcharts 2.x , i colori predefiniti erano:

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

Compatibilità

Marca Versioni supportate
Internet Explorer 6.0 +
Firefox 2.0 +
Cromo 1.0 +
Safari 4.0 +
musica lirica 9.0 +
iOS (Safari) 3.0 +
Browser Android 2.0 +

Highcharts supporta jQuery versione 1.6+ per i browser legacy e 2.0+ per i browser moderni.

Ciao mondo

Inizia includendo highcharts.js nel tuo index.html

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

Aggiungi un <div> per contenere il grafico

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

Specificare la configurazione per creare il grafico. La configurazione mininum richiesta per creare un grafico è -

  • Dove va il grafico? - chart.renderTo

  • Quali sono i dati da tracciare? - Ci sono alcuni modi per inserire i dati da tracciare; il più comune tra di loro è l'oggetto della serie .

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

Ciò crea una trama come segue: violino .

Esistono numerose opzioni di configurazione che possono essere aggiunte al grafico, alcune delle quali sono comuni

  • chart.type - Che tipo di grafico vuoi tracciare?
  • title - Configurazione per il titolo del grafico
  • xAxis / yAxis - Configurazione per l'asse x / asse y del grafico

Un elenco completo di tutte le opzioni di configurazione può essere trovato qui .

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

Esempio JSFiddle

Un buon punto di partenza nel documento Highcharts sarebbe qui .

Installazione o configurazione

Modi per ottenere Highcharts:

npm install highcharts
 
  • Attraverso la pergola;
bower install highcharts
 

Per caricare la libreria principale dal CDN del fornitore, aggiungi semplicemente quanto segue al tuo codice:

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

Le librerie supplementari, come il modulo di esportazione, dovrebbero essere caricate dopo la dichiarazione highcharts.js .

Chiamare le librerie direttamente da Highcharts ti fornirà la versione più aggiornata. Tuttavia, se si dispone di grafici specifici che funzionano meglio con una determinata versione o si desidera ottimizzare le prestazioni del proprio sito Web, è consigliabile archiviare i file localmente.

Le seguenti risorse offrono informazioni dettagliate sull'installazione e la configurazione di Highcharts, oltre a librerie e moduli supplementari che è possibile utilizzare per personalizzare i grafici oltre l'installazione predefinita.