Highcharts - Szybki przewodnik

Highchartsto biblioteka wykresów oparta na języku JavaScript, która ma na celu ulepszenie aplikacji internetowych poprzez dodanie interaktywnych funkcji tworzenia wykresów. Obsługuje szeroką gamę wykresów. Wykresy są rysowane za pomocą SVG w standardowych przeglądarkach, takich jak Chrome, Firefox, Safari, Internet Explorer (IE). W starszej wersji IE 6 do rysowania grafiki używany jest język VML.

Funkcje biblioteki Highcharts

Omówmy teraz kilka ważnych funkcji Biblioteki Highcharts.

  • Compatability - Działa pozornie na wszystkich głównych przeglądarkach i platformach mobilnych, takich jak Android i iOS.

  • Multitouch Support - Obsługuje multitouch na platformach opartych na ekranach dotykowych, takich jak Android i iOS Idealny dla iPhone / iPad i smartfonów / tabletów z systemem Android.

  • Free to Use - Open source i można go używać do celów niekomercyjnych.

  • Lightweight - Biblioteka główna highcharts.js o rozmiarze prawie 35KB jest niezwykle lekką biblioteką.

  • Simple Configurations - Używa json do definiowania różnych konfiguracji wykresów i jest bardzo łatwy do nauczenia i użycia.

  • Dynamic - Pozwala modyfikować wykres nawet po wygenerowaniu wykresu.

  • Multiple axes- Nie ogranicza się do osi x, y. Obsługuje wiele osi na wykresach.

  • Configurable tooltips- Etykietka pojawia się, gdy użytkownik najedzie kursorem na dowolny punkt na wykresie. Highcharts zapewnia wbudowane narzędzie formatujące lub formater wywołań zwrotnych do programowego sterowania etykietą narzędzi.

  • DateTime support- Obsługuj specjalnie datę i godzinę. Zapewnia wiele wbudowanych kontroli nad kategoriami mądrymi datami.

  • Export - Eksportuj wykres do formatu PDF / PNG / JPG / SVG, włączając funkcję eksportu.

  • Print - Wydrukuj wykres za pomocą strony internetowej.

  • Zoomablity - Obsługuje powiększanie wykresu, aby dokładniej wyświetlać dane.

  • External data- Obsługuje dynamiczne ładowanie danych z serwera. Zapewnia kontrolę nad danymi za pomocą funkcji zwrotnych.

  • Text Rotation - Obsługuje obrót etykiet w dowolnym kierunku.

Obsługiwane typy wykresów

Biblioteka Highcharts udostępnia następujące typy wykresów -

Sr.No. Typ i opis wykresu
1

Line Charts

Służy do rysowania wykresów opartych na liniach / splajnach.

2

Area Charts

Służy do rysowania map obszarowych.

3

Pie Charts

Służy do rysowania wykresów kołowych.

4

Scatter Charts

Służy do rysowania rozproszonych wykresów.

5

Bubble Charts

Służy do rysowania wykresów bąbelkowych.

6

Dynamic Charts

Służy do rysowania dynamicznych wykresów, w których użytkownik może modyfikować wykresy.

7

Combinations

Służy do rysowania kombinacji różnych wykresów.

8

3D Charts

Służy do rysowania wykresów 3D.

9

Angular Gauges

Służy do rysowania wykresów typu prędkościomierza.

10

Heat Maps

Służy do rysowania map ciepła.

11

Tree Maps

Służy do rysowania map drzew.

W kolejnych rozdziałach omówimy szczegółowo każdy rodzaj z wyżej wymienionych wykresów wraz z przykładami.

Licencja

Highcharts jest open source i można go używać do celów niekomercyjnych. Aby korzystać z Highcharts w projektach komercyjnych, kliknij łącze - Licencja i ceny

W tym rozdziale omówimy, jak skonfigurować bibliotekę Highcharts, która będzie używana podczas tworzenia aplikacji internetowych.

Highcharts wymaga jQuery jako zależności. Najpierw zainstalujemy bibliotekę jQuery, a następnie bibliotekę Highcharts.

Zainstaluj jQuery

Istnieją dwa sposoby korzystania z jQuery.

  • Download- Pobierz go lokalnie z jQuery.com i używaj.

  • CDN access- Masz również dostęp do CDN. CDN zapewni dostęp na całym świecie do regionalnych centrów danych; w tym przypadku host Google. Oznacza to, że używanie CDN przenosi odpowiedzialność za przechowywanie plików z własnych serwerów na szereg serwerów zewnętrznych. Daje to również tę zaletę, że jeśli odwiedzający Twoją stronę internetową pobrał już kopię jQuery z tej samej sieci CDN, nie będzie trzeba jej ponownie pobierać.

Korzystanie z pobranego jQuery

Dołącz plik JavaScript jQuery do strony HTML za pomocą następującego skryptu -

<head>
   <script src = "/jquery/jquery.min.js"></script>
</head>

Korzystanie z CDN

W tym samouczku używamy wersji CDN biblioteki jQuery.

Dołącz plik JavaScript jQuery do strony HTML za pomocą następującego skryptu -

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
   </script>
</head>

Zainstaluj Highcharts

Poniżej przedstawiono dwa sposoby korzystania z Highcharts.

  • Download - Pobierz go lokalnie z highcharts.com i korzystaj z niego.

  • CDN access- Masz również dostęp do CDN. CDN zapewni dostęp na całym świecie do regionalnych centrów danych; w tym przypadku host Highcharts - Code.Highcharts.Com.

Korzystanie z pobranych wykresów

Dołącz plik JavaScript Highcharts do strony HTML, używając następującego skryptu -

<head>
   <script src = "/highcharts/highcharts.js"></script>
</head>

Korzystanie z CDN

W tym samouczku używamy wersji CDN biblioteki Highcharts.

Dołącz plik JavaScript Highcharts do strony HTML, używając następującego skryptu -

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

W tym rozdziale pokażemy konfigurację wymaganą do narysowania wykresu za pomocą interfejsu API Highcharts.

Krok 1: Utwórz stronę HTML

Utwórz stronę HTML za pomocą bibliotek javascript jQuery i Highcharts.

HighchartsTestHarness.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      
      <script language = "JavaScript">
         $(document).ready(function() {
         });
      </script>
      
   </body>
</html>

Tutaj container div służy do przechowywania wykresu narysowanego za pomocą biblioteki Highcharts.

Krok 2: Utwórz konfiguracje

Biblioteka Highcharts używa bardzo prostych konfiguracji przy użyciu składni json.

$('#container').highcharts(json);

Tutaj json reprezentuje dane json i konfigurację, których używa biblioteka Highcharts do rysowania wykresu w kontenerze div przy użyciu metody highcharts (). Teraz skonfigurujemy różne parametry, aby utworzyć wymagany ciąg json.

tytuł

Skonfiguruj tytuł wykresu.

var title = {
   text: 'Monthly Average Temperature'   
};

podtytuł

Skonfiguruj podtytuł wykresu.

var subtitle = {
   text: 'Source: WorldClimate.com'
};

xAxis

Skonfiguruj pasek do wyświetlania na osi X.

var xAxis = {
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'
      ,'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};

yAxis

Skonfiguruj tytuł, wykresy, które mają być wyświetlane na osi Y.

var yAxis = {
   title: {
      text: 'Temperature (\xB0C)'
   },
   plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
   }]
};

podpowiedź

Skonfiguruj podpowiedź. Umieść przyrostek do dodania po wartości (oś y).

var tooltip = {
   valueSuffix: '\xB0C'
}

legenda

Skonfiguruj legendę tak, aby była wyświetlana po prawej stronie wykresu wraz z innymi właściwościami.

var legend = {
   layout: 'vertical',
   align: 'right',
   verticalAlign: 'middle',
   borderWidth: 0
};

seria

Skonfiguruj dane, które mają być wyświetlane na wykresie. Seria to tablica, w której każdy element tej tablicy reprezentuje pojedynczą linię na wykresie.

var series = [
   {
      name: 'Tokyo',
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
   }, 
   {
      name: 'New York',
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
   }, 
   {
      name: 'Berlin',
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
   }, 
   {
      name: 'London',
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
   }
];

Krok 3: Zbuduj dane JSON

Połącz wszystkie konfiguracje.

var json = {};

json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;

Krok 4: Narysuj wykres

$('#container').highcharts(json);

Przykład

Rozważ następujący przykład, aby lepiej zrozumieć składnię konfiguracji -

highcharts_configuration.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script> 
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      <script language = "JavaScript">
         $(document).ready(function() {
            var title = {
               text: 'Monthly Average Temperature'   
            };
            var subtitle = {
               text: 'Source: WorldClimate.com'
            };
            var xAxis = {
               categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            };
            var yAxis = {
               title: {
                  text: 'Temperature (\xB0C)'
               },
               plotLines: [{
                  value: 0,
                  width: 1,
                  color: '#808080'
               }]
            };   

            var tooltip = {
               valueSuffix: '\xB0C'
            }
            var legend = {
               layout: 'vertical',
               align: 'right',
               verticalAlign: 'middle',
               borderWidth: 0
            };
            var series =  [{
                  name: 'Tokyo',
                  data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
                     26.5, 23.3, 18.3, 13.9, 9.6]
               }, 
               {
                  name: 'New York',
                  data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 
                     24.1, 20.1, 14.1, 8.6, 2.5]
               }, 
               {
                  name: 'Berlin',
                  data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
                     17.9, 14.3, 9.0, 3.9, 1.0]
               }, 
               {
                  name: 'London',
                  data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 
                     16.6, 14.2, 10.3, 6.6, 4.8]
               }
            ];

            var json = {};
            json.title = title;
            json.subtitle = subtitle;
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.tooltip = tooltip;
            json.legend = legend;
            json.series = series;

            $('#container').highcharts(json);
         });
      </script>
   </body>
   
</html>

Wynik

Sprawdź wynik.

Wykresy liniowe służą do rysowania wykresów liniowych / splajnowych. W tej sekcji omówimy różne typy wykresów liniowych i opartych na splajnach.

Sr.No. Typ i opis wykresu
1 Linia podstawowa

Podstawowy wykres liniowy.

2 Z etykietami danych

Wykres z etykietami danych.

3 Dane ładowane przez Ajax, klikalne punkty

Wykres rysowany po pobraniu danych z serwera.

4 Szeregi czasowe z możliwością powiększania

Wykres z szeregami czasowymi.

5 Splajn z odwróconymi osiami

Wykres splajnowy z odwróconymi osiami.

6 Splajn z symbolami

Wykres splajnowy zawierający symbole ciepła / deszczu.

7 Splajn z pasmami działki

Wykres splajnowy z pasmami wykresu.

8 Dane dotyczące czasu w nieregularnych odstępach czasu

Wykres dużego zbioru danych czasowych.

9 Oś logarytmiczna

Wykres przedstawiający oś logarytmiczną.

Wykresy warstwowe służą do rysowania wykresów warstwowych. W tej sekcji omówimy różne typy wykresów obszarowych.

Sr.No. Typ i opis wykresu
1 Obszar podstawowy

Podstawowy wykres warstwowy.

2 Obszar o wartościach ujemnych

Wykres warstwowy o wartościach ujemnych.

3 Obszar skumulowany

Wykres z obszarami ułożonymi jeden na drugim.

4 Obszar procentowy

Wykres z danymi w ujęciu procentowym.

5 Obszar z brakującymi punktami

Wykres z brakującymi punktami w danych.

6 Odwrócone osie

Obszar z odwróconymi osiami.

7 Powierzchnia-splajn

Wykres warstwowy wykorzystujący splajn.

8 Zakres powierzchni

Wykres warstwowy wykorzystujący zakresy.

9 Zakres powierzchni i linia

Wykres warstwowy wykorzystujący zakres i linię.

Wykresy słupkowe służą do rysowania wykresów warstwowych. W tej sekcji omówimy różne typy wykresów słupkowych.

Sr.No. Typ i opis wykresu
1 Pasek podstawowy

Podstawowy wykres słupkowy.

2 Stacked Bar

Wykres słupkowy ze słupkami ułożonymi jeden na drugim.

3 Ujemny obszar skumulowany

Wykres słupkowy ze stosem ujemnym.

Wykresy kolumnowe służą do rysowania wykresów kolumnowych. W tej sekcji omówimy różne typy wykresów kolumnowych.

Sr.No. Typ i opis wykresu
1 Kolumna podstawowa

Podstawowy wykres kolumnowy.

2 Kolumna z wartościami ujemnymi

Wykres kolumnowy z wartościami ujemnymi.

3 Kolumna piętrowa

Wykres z kolumnami ułożonymi jedna na drugiej.

4 Kolumna skumulowana i zgrupowana

Wykres z kolumną w formie skumulowanej i zgrupowanej.

5 Kolumna ze skumulowanym procentem

Wykres ze skumulowanym procentem.

6 Kolumna z obróconymi etykietami

Wykres kolumnowy z obróconymi etykietami w kolumnach.

7 Kolumna z drążeniem do dołu

Wykres kolumnowy z możliwością przechodzenia do szczegółów.

8 Kolumna o stałym położeniu

Wykres kolumnowy ze stałym położeniem.

9 Dane zdefiniowane w tabeli HTML

Wykres kolumnowy wykorzystujący dane zdefiniowane w tabeli HTML.

10 Zakres kolumn

Wykres kolumnowy wykorzystujący zakresy.

Wykresy kołowe służą do rysowania wykresów kołowych. W tej sekcji omówimy różne rodzaje wykresów kołowych.

Sr.No. Typ i opis wykresu
1 Podstawowe ciasto

Podstawowy wykres kołowy.

2 Ciasto z legendami

Wykres kołowy z legendami.

3 Wykres pierścieniowy

Wykres pierścieniowy.

4 Pączek półokrągły

Półokrągły wykres pierścieniowy.

5 Ciasto z drążeniem

Wykres kołowy z możliwością przechodzenia do szczegółów.

6 Wykres kołowy z gradientem

Wykres kołowy z wypełnieniem gradientowym.

7 Wykres kołowy z monochromatycznym

Wykres kołowy z wypełnieniem monochromatycznym.

Wykresy punktowe służą do rysowania wykresów punktowych. W tej sekcji omówimy różne typy wykresów punktowych.

Sr.No. Typ i opis wykresu
1 Wykres punktowy

Wykres punktowy.

Wykresy bąbelkowe służą do rysowania wykresów bąbelkowych. W tej sekcji omówimy różne typy wykresów bąbelkowych.

Sr.No. Typ i opis wykresu
1 Wykres bąbelków

Wykres bąbelków.

2 Wykres bąbelków 3D

Wykres bąbelków 3D.

Wykresy dynamiczne służą do rysowania wykresów opartych na danych, na których dane mogą ulec zmianie po wyrenderowaniu wykresu. W tej sekcji omówimy różne typy wykresów dynamicznych.

Sr.No. Typ i opis wykresu
1 Splajn aktualizowany co sekundę

Wykres splajnowy aktualizowany co sekundę.

2 Kliknij, aby dodać punkt

Wykres z możliwością dodawania punktów.

Wykresy kombinowane służą do rysowania wykresów mieszanych; na przykład wykres słupkowy z wykresem kołowym. W tej sekcji omówimy różne typy wykresów kombinacji.

Sr.No. Typ i opis wykresu
1 Kolumna, linia i ciasto

Wykres z kolumnami, liniami i kołami.

2 Podwójne osie, linia i kolumna

Wykres z podwójnymi osiami, linią i kolumną.

3 Wiele osi

Wykres z wieloma osiami.

4 Rozrzut z linią regresji

Wykres punktowy z linią regresji.

Wykresy 3D służą do rysowania wykresów trójwymiarowych. W tej sekcji omówimy różne typy wykresów 3D.

Sr.No. Typ i opis wykresu
1 Kolumna 3D

Wykres kolumnowy 3D.

2 Kolumna 3D z wartością zerową

Wykres kolumnowy 3D z wartościami zerowymi i zerowymi.

3 Kolumna 3D ze sztaplowaniem

Wykres kolumnowy 3D z układaniem i grupowaniem.

4 3D Pie

Wykres kołowy 3D.

5 Pączek 3D

Wykres pierścieniowy 3D.

Wykresy mierników kątowych są używane do rysowania wykresów typu miernik / miernik. W tej sekcji omówimy różne typy wykresów mierników kątowych.

Sr.No. Typ i opis wykresu
1 Miernik kątowy

Wykres kątowy.

2 Solid Gauge

Wykres pełnowymiarowy.

3 Zegar

Zegar.

4 Miernik z podwójną osią

Wykres wzorcowy z dwiema osiami.

5 Miernik VU

Wykres miernika VU.

Wykresy Mapa Temperatur są używane do rysowania wykresów typu Mapa Temperatur. W tej sekcji omówimy różne typy map ciepła.

Sr.No. Typ i opis wykresu
1 Mapa ciepła

Mapa ciepła.

2 Duża mapa ciepła

Duża mapa ciepła.

Wykresy mapy drzewa służą do rysowania wykresów typu mapy drzewa. W tej sekcji omówimy różne typy map drzew.

Sr.No. Typ i opis wykresu
1 Mapa drzewa

Mapa drzewa z osią kolorów.

2 Mapa drzewa z poziomami

Mapa drzewa z poziomami.

3 Mapa dużych drzew

Mapa dużych drzew.