Сравнение между d3.js и chart.js(только для диаграмм)
Я использовал chart.js в своих проектах несколько раз, но я никогда не использовал d3.js. Многие говорят, что d3.js - лучшая структура javascript для диаграмм, но ни один из них не может объяснить, почему, особенно когда мне нужно сравнить с chart.js.
Я нашел это: http://www.fusioncharts.com/javascript-charting-comparison/
но это не то, что я искал.
Кто-нибудь знает о сравнении этих фреймворков с точки зрения удобства и производительности (только для диаграмм)?
Ответы
Ответ 1
d3.js не является "графической" библиотекой.. Это библиотека для создания и управления SVG/HTML. Он предоставляет инструменты, которые помогут вам визуализировать и управлять вашими данными. Хотя вы можете использовать его для создания обычных графиков (bar, line, pie и т.д.), Он способен на гораздо больше. Разумеется, с этим "способным на столько" возникает более крутая кривая обучения. Существует много обычных графических библиотек, построенных поверх d3.js - nvd3.js, dimple.js, dc.js, если вы хотите пройти этот маршрут.
Я не знаком с Chart.js, но быстрый просмотр веб-сайта говорит мне больше о запуске библиотеки графиков мельниц. Он поддерживает 6 основных типов диаграмм, и вы никогда не будете делать материал как с . Но API выглядит просто, и я уверен, что он прост в использовании.
Кроме того, самое очевидное различие между ними состоит в том, что Chart.js основано на холсте, а d3.js - в основном о SVG. (Теперь я говорю, главным образом, потому что SVG может манипулировать всеми типами HTML-элементов, поэтому вы могли бы даже использовать его, чтобы помочь вам нарисовать холст.) В целом холст выйдет из SVG для большого количества элементов (я говорю очень много - тысячи точек, линий и т.д.). С другой стороны, SVG легче манипулировать и взаимодействовать. С SVG каждая точка, линия и т.д. Становится частью DOM - вы хотите, чтобы эта точка была зеленой, просто измените ее. С холстом его статический рисунок, который нужно было перерисовать, чтобы внести какие-либо изменения - конечно, он рисует так быстро, что вы обычно никогда не замечаете. Здесь хорошее чтение от Microsoft.
Ответ 2
ОБНОВЛЕНО 2016
Общее эмпирическое правило:
d3.js - отлично подходит для интерактивной визуализации
chart.js - отлично подходит для быстрого и простого
Несколько других графических библиотек находятся на подъеме, поэтому продолжайте тестирование и не забудьте внести вклад в с открытым исходным кодом!
Ответ 3
Поскольку я пытаюсь найти быструю графическую библиотеку для отображения диаграмм на мобильных устройствах, производительность для меня была важна. Он также должен был иметь лицензию, которая позволяет использовать ее на коммерческой основе. Я сравнил:
- c3, который основан на d3 и поэтому использует SVG
- chart.js, который использует холст
Графики загружаются внутри компонента 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 имел тот же результат, что и на рабочем столе. Таким образом, замедление работы на мобильных устройствах определенно связано с ограничениями на оборудование/обработку.
Надеюсь, что поможет
