Interaktywne wykresy z JavaScript i Highcharts

Rankingi to biblioteka napisana w HTML5 i czystym JavaScript:

Zobaczmy, jak to działa, jak jest skonstruowane i jak wdrożyć je na naszej stronie internetowej.
Struktura katalogów
Najpierw pobieramy zip, który zawiera naszą bibliotekę, rozpakowujemy go i widzimy nasz katalog plików i jego strukturę.

Zobaczmy, co zawiera każdy katalog i do czego służy:

• index.html: To jest strona testowa HTML, dzięki której możesz przeprowadzać testy i przeglądać domyślne opcje.
• przykłady: Ten folder zawiera cały kod źródłowy przykładów.
• grafika: Ten folder zawiera obrazy użyte w przykładach.
• serwer-eksportujący: Jest to katalog, który zawiera funkcję po stronie serwera do eksportowania grafiki do obrazu.
• js: To jest główny katalog Highcharts. Każdy plik JavaScript ma dwa przyrostki, pierwszy .src.js to kod źródłowy z komentarzami, a drugi .js to jego zminimalizowana wersja.
• adaptery: Oto wtyczki, z których można korzystać Mootools lub Prototyp jako frameworki, w tym katalogu są następujące:

• eksport.js: ten plik daje nam funkcje do eksportu i drukowania.

• motywy: Ten folder zawiera serię gotowych plików JavaScript z ustawieniami, takimi jak kolor tła, style i inne. Możemy załadować jeden z tych plików do grafiki dla różnych stylów.

Widząc, jak działa ta biblioteka i jak jest zorganizowana, przejdźmy do praktycznego przykładu implementacji Rankingi na naszej stronie internetowej.

Najpierw uwzględniamy biblioteki Rankingi, a także biblioteki jQuery dla dodatkowej funkcjonalności:

 Pierwszy przykład listy rankingowej 

Wykres krzywej jest zdefiniowany w specyfikacji obiektu, która zawiera wszystkie właściwości i serie danych.

 var chart = new Highcharts.Chart ({chart: {…}, tytuł: '…'…}); 

Po utworzeniu tego obiektu grafika jest wyświetlana w przeglądarce, w ramach tego obiektu znajduje się szereg opcji, które wyjaśnimy poniżej.
Instrukcja renderTo nakazuje Highcharts wyświetlanie wykresu w kodzie HTML, w szczególności wz id = "kontener". Opcja rodzaj określa typ wykresu, opcje mogą być: obszar, linia, splajn itp. W tym przykładzie użyjemy klin.

 chart: {renderTo: 'container', type: 'spline'} 

Następnie ustawiamy tytuł i podtytuł, które pojawią się na górze wykresu.

 tytuł: {tekst: 'Przeglądarki internetowe…'}, podtytuł: {tekst: 'Od 2008 do teraźniejszości'}, 

W opcji kategorii we własności xOś zawiera tablicę z etykietami każdego wpisu danych oraz z tickInterwały Oddzielamy sposób drukowania tych etykiet.

 xAxis: {kategorie: ['styczeń 2008', 'luty',…. ], zaznaczyćInterwał: 3}, 

Opcje na nieruchomości yAxis Pozwalają nam przypisać tytuł tej osi i ustawić minimalną i maksymalną wartość, w której ograniczymy nasz wykres.

 yAxis: {title: {text: 'Procent%'}, min: 0}, 

Własność Opcje fabuły To on kontroluje sposób wyświetlania każdej serii danych w zależności od typu wykresu.

 plotOptions: {series: {lineWidth: 2}}, 

Właściwość series jest środkiem całego obiektu konfiguracyjnego, który definiuje dane, które będą zasilać wykres.

 seria: [{nazwa: „Internet Explorer”, dane: [54,7, 54,7, 53,9, 54,8, 54,4,…]}, {nazwa: „FireFox”, dane: [36,4, 36,5, 37,0, 39,1, 39,8,…] }, { 

Teraz, po wyjaśnieniu wszystkich części kodu, zobaczmy, jak będzie wyglądał w naszej przeglądarce.

Na koniec zostawiam cały kod, abyście mogli go sami przetestować i nie zapominając, że można go dostosować do dowolnych potrzeb.

 Pierwszy przykład listy rankingowej

Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt