Porównanie między d3.js i chart.js (tylko dla wykresów) [zamknięte]

Kilkakrotnie korzystałem z chart.js w moich projektach, ale nigdy nie używałem d3.js. Wiele osób twierdzi, że d3.js jest najlepszym frameworkiem javascript dla wykresów, ale żaden z nich nie jest w stanie wyjaśnić dlaczego, zwłaszcza gdy chcę porównać z chart.js.

Znalazłem to: http://www.fusioncharts.com/javascript-charting-comparison/, ale to nie jest to, czego szukałem.

Czy ktoś wie o porównaniu tych frameworków pod względem użyteczności i wydajności (tylko dla wykresów)?

d3.jsnie jest biblioteką do tworzenia wykresów. Jest to biblioteka do tworzenia i manipulowania SVG / HTML. Udostępnia narzędzia pomagające wizualizować i manipulować danymi. Chociaż można go używać do tworzenia konwencjonalnych wykresów (słupkowych, liniowych, kołowych itp.), Jest w stanie o wiele więcej. Oczywiście z tym „zdolnym do tak wielu” przychodzi bardziej stroma krzywa uczenia się. Istnieje wiele tradycyjnych bibliotek wykresów wbudowanych na górze d3.js- nvd3.js, dimple.js, dc.jsjeśli chcesz iść tą drogą.

Nie jestem tego zaznajomiony, Chart.jsale szybki rzut oka na stronę internetową mówi mi, że jest to raczej zwykła biblioteka wykresów walcarek. Obsługuje 6 podstawowych typów wykresów i nie są nigdy zamiar zrobić rzeczy jak to z nim . Ale interfejs API wygląda na prosty i jestem pewien, że jest łatwy w użyciu.

Poza tym najbardziej oczywistą różnicą między nimi jest to, że Chart.jsjest oparty na płótnie, podczas gdy d3.jsdotyczy głównie SVG. (Teraz mówię głównie dlatego, że d3.jsmożna manipulować wszystkimi typami elementów HTML, więc można go nawet użyć do pomocy w rysowaniu na płótnie). Ogólnie płótnie będzie wykonywać SVG dla dużej liczby elementów (mówię bardzo duże - tysiące punktów, linii itp ...). Z drugiej strony SVG jest łatwiejszy w obsłudze i interakcji. Z SVG każdy punkt, linia itp. Staje się częścią DOM - chcesz, aby ten punkt był teraz zielony, po prostu go zmień. Płótno to statyczny rysunek, który miał zostać przerysowany, aby wprowadzić jakąkolwiek zmianę - oczywiście rysuje tak szybko, że zwykle nigdy nie zauważysz. Oto kilka dobrych lektur od firmy Microsoft.

Ponieważ próbuję znaleźć bibliotekę szybkich wykresów, aby wyświetlać wykresy na urządzeniach mobilnych, wydajność była dla mnie ważna. Musiał też mieć licencję umożliwiającą komercyjne wykorzystanie. Porównałem:

1. c3, który jest oparty na d3 i dlatego używa SVG
2. chart.js, który używa kanwy

Wykresy są ładowane wewnątrz komponentu WebView w natywnej aplikacji, a wszystkie dane (w tym biblioteka JS) są lokalne, więc nie ma spowolnienia z powodu żądań http. Aby jeszcze bardziej zmaksymalizować wydajność, umieściłem wszystko w jednym pliku.

Załadowałem 4 wykresy (linia, słupek, kołowy, kombinacja linia / słupek) razem z około 500 punktami danych.

Mój pomiar czasu nie obejmował faktycznego ładowania strony html. Mierzyłem od momentu, kiedy zacząłem używać kodu biblioteki wykresów do końca renderowania. Wszystkie animacje wykresów zostały wyłączone.

C3 zajmowało około 1500-1800 ms na nowoczesnych urządzeniach z Androidem i iPhone'ach. iPhone działał o około 100 ms lepiej niż Android.

Chart.js zajęło około 400-800 ms. Android działał około 300 ms lepiej niż iPhone.

Nic dziwnego, SVG jest wolniejszy. W zależności od przypadku użycia może być zbyt wolny.

Na komputerze stacjonarnym renderowanie w c3 trwało około 150-200 ms, a charts.js około 80-100 ms. Uruchomienie tego samego testu w emulatorze Androida i iPhone'a dało taki sam wynik jak na komputerze stacjonarnym. Tak więc spowolnienie na urządzeniach mobilnych jest zdecydowanie spowodowane ograniczeniami sprzętu / przetwarzania.

Mam nadzieję, że to pomoże

AKTUALIZACJA 2016

Ogólna zasada brzmi:

d3.js - świetne do interaktywnych wizualizacji

chart.js - świetne do szybkiego i prostego

Kilka innych bibliotek wykresów rośnie, więc kontynuuj testowanie i nie zapomnij przyczynić się do open source !

chart.js
• Używa znacznika płótna html5, który jest zależny od piksela, więc kiedy zmieniasz rozmiar wykresu generowanego przez chart.js, tracisz przejrzystość
• Jest deklaratywny, co oznacza, że ​​musisz po prostu zadeklarować wymagane dane wejściowe, aby wygenerować wykres
• Krzywa uczenia się jest mniejsza
• Rodzaje generowanych wykresów są predefiniowane i ograniczone

d3.js
• Używa svg, który jest niezależny od rozdzielczości, więc gdy zmienisz rozmiar wykresu wygenerowanego przez d3, nie stracisz przejrzystości
• Jest to konieczne, oznacza, że ​​musisz napisać logikę, aby wygenerować wykresy
• Stroma krzywa uczenia się
• Typy generowanych wykresów nie są wstępnie zdefiniowane i możesz utworzyć dowolny wykres