Umieszczanie wykresów na stronach www
HTML + CSS Aktualizacja: 07.08.2017

Umieszczanie wykresów na stronach www

Posiadasz sporo danych i przedstawiasz je użytkownikom w tabelach? Nie zapominaj, że wklejanie grafik, obrazków, elementów multimedialnych na stronach internetowych jest coraz popularniejsze. Skoro masz już źródło danych, to czemu nie przedstawić go w formie eleganckiego wykresu?

Sposobów na uzyskanie wykresu jest sporo. Na rynku dostępnych jest wiele rozwiązań, w tym bezpłatnych. Poniżej przedstawiam kilka z nich, które zwróciły moją uwagę. Tego typu rozwiązania pozwalają na zautomatyzowanie generowania wykresów, od tych najprostszych do bardziej zaawansowanych.

1. ChartJS

Generowanie wykresów chart JS

Zestawienie rozpocznę od ChartJS, który odrazu mi się spodobał. Jest to biblioteka JavaScript, dzięki której możemy wygenerować grafiki przyciągające wzrok. Korzysta z HTML5 Canvas, wspiera nowoczesne przeglądarki (w tym Internet Explorer od wersji 9). Jest lekki, waży około 11KB. Warto także wspomnieć, że ChartJS generuje responsywne wykresy, czyli dopasowujące się do ekranu użytkownika.

Strona internetowa: chartjs.org
Licencja: MIT

2. CanvasJS

Generowanie wykresów za pomocą CanvasJS

Umożliwia szybkie generowanie wykresów, które są responsywne - można z nich korzystać na urządzeniach mobilnych. Ma proste API, możliwe jest tworzenie bogatych paneli zarządzania. Posiada wiele schematów graficznych. Zdaniem twórcy CanvasJS jest 10 razy szybsze w porównaniu do Flasha.

Strona internetowa: canvasjs.com
Licencja: canvasjs.com/license-canvasjs

3. Google Chart API

Google Chart API

Firma Google również pokusiła się o stworzenie własnej klasy do obsługi wykresów. Rozbudowany kod pozwala na wygenerowanie wykresów: kołowych w 2D i 3D, liniowych, słupkowych, kardioidalnych oraz punktowych. Dostępnych jest 18 typów wykresów. Przy tym wszystko jest przyjazne dla użytkownika - Google wykorzystuje dane ze zmiennych, dzięki czemu nie ma konieczności edytowania plików. Klasa Google API Chart posiada własną dokumentację.

Strona internetowa: developers.google.com/chart/
Licencja: developers.google.com/chart/terms

4. Plottable

Wykresy plot.ly

Plottable JS to prosta biblioteka. Umożliwia tworzenie prostych wykresów.

Strona internetowa: plottablejs.org
Licencja: MIT

5. eJS Chart

Wykresy ejsChart

To otwarto źródłowe rozwiązanie. Wspiera najpopularniejsze przeglądarki Internet Explorer (od wersji 6), Mozilla Firefox, Safari, Chrome. Dostępnych jest kilka najczęściej używanych typów wykresów.

Strona internetowa: ejschart.com
Licencja: Open Source

6. Mniejsze projekty

Chartist
Wyróżnia się prostą i lekką biblioteką ważącą około 10KB.

plot.ly
Jedna z najbardziej zaawansowanych bibliotek, 20 typów wykresów, w tym wykresy 3D.

Am Charts
Zaawansowana propozycja, responsywna i zgodna ze standardami.

LibChart
Wykresy dwuwymiarowe i trójwymiarowe: słupkowe, liniowe, kołowe. Dane wprowadza się do pliku. Wymagania: PHP, GD. Licencja: GNU General Public License (GPL).

A definition list bar chart
Prosty generator wykresów słupkowych dwuwymiarowych. Wymagania: JavaScript.

Flash charts by amcharts
Prosty generator wykresów kołowych dwuwymiarowych i trójwymiarowych a także liniowych etc. Od pozostałych wyróżnia się dodatkową, ciekawą animacją. Wymagania: JavaScript.

ChartDemo (WebFX)
Prosty generator wykresów słupkowych, liniowych dwuwymiarowych. Wymagania: JavaScript. Działa pod przeglądarkami - Firefox 1.5+, Opera 9.0+, IE6+.

Autor: . Tagi: , , , , . Źródło obrazek główny: Pixabay.

Dodaj komentarz

5 komentarzy do "Umieszczanie wykresów na stronach www"

avatar
najnowszy najstarszy oceniany
Tomasz Skręt
Gość

Bardzo przydatny spis. Do tej pory korzystałem z Google Charts API, ale jak widać jest więcej przydanych skryptów.

mariusz
Gość

Dotyczy Plotr'a:
http://solutoire.com/flotr/
Flotr is the replacement of Plotr. Because Plotr is deprecated, I recommend switching to Flotr.

Bartosz Stefanicki
Gość

@Mariusz,
poprawione - dzięki.

Sobak
Gość

Dobrze, że w końcu pojawił się nowy wpis. Już myślałem że strona umarła...

Bartosz Stefanicki
Gość

@Sobak,
od tego momentu wpisy powinny pojawiać się regularnie, pozdrawiam :-)