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