Я несколько раз использовал 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 - отлично подходит для быстрого и простого
Количество других графических библиотек растет, так что продолжайте тестирование и не забывайте вносить свой вклад в открытый исходный код !