Сравнение между Д3.js и диаграмма.js (только для диаграмм)
Я использовал диаграмму.js в моих проектах несколько раз, но я никогда не использовал d3.js. Многие говорят, что d3.js-лучшая платформа javascript для диаграмм, но никто из них не может объяснить, почему, особенно когда я хочу сравнение с диаграммой.js.
Я нашел это:http://www.fusioncharts.com/javascript-charting-comparison/ но это не то, что я искал.
кто-нибудь знает о сравнении этих фреймворков с точки зрения удобство использования и производительность (только для диаграмм)?
3 ответов
d3.js
Это не "библиотека диаграмм". это библиотека для создания и управления SVG / HTML. Он предоставляет инструменты для визуализации и управления данными. Хотя вы можете использовать его для создания обычных диаграмм (bar, line, pie и т. д...) он способен на гораздо большее. Конечно, с этим "способным на многое" приходит более крутая кривая обучения. Есть много обычных библиотек диаграмм, построенных поверх d3.js
- nvd3.js
, dimple.js
, dc.js
если вы хотите пойти этот маршрут.
Я не знаком с Chart.js
но быстрый взгляд на веб-сайт говорит мне, что это больше похоже на библиотеку графиков мельницы. Он поддерживает 6 основных типов диаграмм, и вы не собираетесь делать материал как этой С это. но API выглядит просто, и я уверен, что он прост в использовании.
кроме этого, наиболее очевидным различием между ними является это Chart.js
- это холст, а d3.js
в основном о SVG. (Теперь я говорю главным образом, потому что d3.js
может манипулировать всеми типами HTML-элементов так вы даже можете использовать его, чтобы помочь вам рисовать на холсте.) В целом canvas будет выполнять SVG для большого количества элементов (я говорю очень большие - тысячи точек, линий и т. д.)...). SVG, с другой стороны, легче манипулировать и взаимодействовать. С SVG каждая точка, линия и т. д. становится частью DOM - если вы хотите, чтобы точка была зеленой сейчас, просто измените ее. С canvas его статический рисунок, который должен был быть перерисован, чтобы внести какие - либо изменения-конечно, он рисует так быстро, что вы обычно никогда не заметите. Вот!--32-->хорошее чтение из Microsoft.
обновлено 2016
общее правило такое:
d3.js
- отлично подходит для интерактивных визуализаций
chart.js
- отлично подходит для быстрого и простого
несколько других библиотек диаграмм находятся на подъеме, поэтому продолжайте тестирование и не забудьте внести свой вклад в открыть источник!
поскольку я пытаюсь найти быструю библиотеку диаграмм для отображения диаграмм на мобильных устройствах, производительность была важна для меня. Он также должен иметь лицензию, которая позволяет использовать в коммерческих целях. Я сравнил:
- c3, который основан на d3 и поэтому использует SVG
- диаграмма.js, который использует canvas
диаграммы загружаются внутри компонента WebView внутри собственного приложения, и все данные (включая библиотеку JS) являются локальными, поэтому не замедляются из-за HTTP-запросов. Чтобы увеличить производительность еще больше, я дополнительно помещаю все в один файл.
Я загрузил 4 диаграммы (линия, Бар, пирог, линия/Бар комбо) вместе около 500 точек данных.
мое измерение времени исключило фактическую загрузку html-страницы. Я измерил форму в тот момент, когда начал использовать код библиотеки диаграмм до конца рендеринга. Вся анимация графика была отключена.
C3 занял около 1500-1800 МС на современном Android и IPhone устройств. iPhone работает примерно на 100 мс лучше, чем Android.
диаграмма.js занял около 400-800ms. Android выполнен примерно на 300 мс лучше, чем iPhone.
неудивительно, SVG работает медленнее. В зависимости от вашего варианта использования, может быть слишком медленно.
на настольном компьютере рендеринг в c3 был около 150-200ms и диаграмм.js вокруг 80-100ms. Запуск того же теста в эмуляторе Android и iPhone имел тот же результат, что и на рабочем столе. Таким образом, замедление на мобильных устройствах определенно из-за ограничений оборудования/обработки.
надеюсь, что это поможет