Я кілька разів використовував chart.js у своїх проектах, але ніколи не використовував d3.js. Багато людей говорять, що d3.js - найкращий фреймворк javascript для діаграм, але жоден з них не може пояснити, чому, особливо коли я хочу порівняння з chart.js.
Я знайшов це: http://www.fusioncharts.com/javascript-charting-comparison/, але це не те, що я шукав.
Хтось знає про порівняння цих фреймворків з точки зору зручності та продуктивності (лише для діаграм)?
Відповіді:
d3.jsне є "графічною" бібліотекою. Це бібліотека для створення та управління SVG / HTML. Він надає інструменти, які допоможуть вам візуалізувати дані та маніпулювати ними. Хоча ви можете використовувати його для створення звичайних діаграм (стовпчиків, ліній, пирогів тощо ...), він здатний зробити набагато більше. Звичайно, з цим «здатним на стільки» з’являється більш крута крива навчання. Є багато звичайних бібліотеки для побудови графіків , побудованих на вершині d3.js- nvd3.js, dimple.js, dc.jsякщо ви хочете йти по цьому шляху.
Я не знайомий з цим, Chart.jsале швидкий огляд веб-сайту підказує мені, що це більше запуск бібліотеки діаграм млинів. Він підтримує 6 основних типів діаграм , і ви ніколи не збираєтеся робити речі , як це з ним . Але API виглядає просто, і я впевнений, що він простий у використанні.
Окрім цього, найбільш очевидною відмінністю між ними є те, що Chart.jsна основі полотна, в той час як d3.jsце в основному про SVG. (Зараз я кажу, головним чином, тому, що d3.jsможе маніпулювати всіма типами елементів HTML, щоб ви могли навіть використовувати його, щоб допомогти вам малювати на полотні.) Загалом полотно виконує SVG для великої кількості елементів (я кажу дуже великих - тисяч точок, ліній тощо ...). SVG, навпаки, легше маніпулювати ними та взаємодіяти. Завдяки SVG кожна точка, лінія тощо стає частиною DOM - ви хочете, щоб ця точка стала зеленою зараз, просто змініть її. Полотно - це статичний малюнок, який потрібно було перемалювати, щоб внести будь-які зміни - звичайно, він малюється так швидко, що ви, як правило, ніколи не помітите. Ось кілька хороших читань від Microsoft.
Оскільки я намагаюся знайти бібліотеку швидких графіків для показу графіків на мобільних пристроях, для мене була важлива продуктивність. Він також повинен мати ліцензію, яка дає змогу комерційно використовувати. Я порівняв:
Діаграми завантажуються всередину компонента WebView усередині власного додатка, і всі дані (включаючи бібліотеку JS) є локальними, тому не виникає уповільнення через http-запитів. Щоб ще більше збільшити продуктивність, я додатково розміщую все в одному файлі.
Я завантажив 4 діаграми (рядок, стовпчик, пиріг, комбінований рядок / рядок) із приблизно 500 точками даних.
Мій час вимірювання виключав фактичне завантаження сторінки html. Я виміряв форму з моменту, коли я почав використовувати код бібліотеки діаграм до кінця візуалізації. Усі анімації діаграм вимкнено.
C3 зайняв близько 1500-1800 мс на сучасних пристроях Android та IPhone. iPhone працював приблизно на 100 мс краще, ніж Android.
Chart.js зайняв близько 400-800 мс. Android працював приблизно на 300 мс краще, ніж iPhone.
Не дивно, SVG працює повільніше. Залежно від вашого варіанту використання, може бути занадто повільним.
На настільному комп'ютері візуалізація в c3 становила близько 150-200 мс, а charts.js - близько 80-100 мс. Запуск одного і того ж тесту в емуляторі Android та iPhone дав ті самі результати, що і на робочому столі. Тож уповільнення роботи мобільних пристроїв, безумовно, пов’язане з обмеженнями апаратного забезпечення / обробки.
Сподіваюся, це допомагає
ОНОВЛЕНО 2016
Загальне правило:
d3.js - чудово підходить для інтерактивної візуалізації
chart.js - чудово підходить для швидкого та простого
Кілька інших бібліотек графіків зростають, тому продовжуйте тестувати і не забувайте брати участь у відкритому коді !