Сравнение d3.js и chart.js (только для диаграмм) [закрыто]

Я несколько раз использовал 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.

Поскольку я пытаюсь найти библиотеку быстрых диаграмм для отображения диаграмм на мобильных устройствах, производительность была важна для меня. Он также должен был иметь лицензию, позволяющую использовать его в коммерческих целях. Я сравнил:

1. c3, который основан на d3 и поэтому использует SVG
2. 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 дало тот же результат, что и на компьютере. Таким образом, замедление работы мобильных устройств определенно связано с ограничениями оборудования / обработки.

надеюсь, это поможет

ОБНОВЛЕНО 2016

Общее практическое правило:

d3.js - отлично подходит для интерактивных визуализаций

chart.js - отлично подходит для быстрого и простого

Количество других графических библиотек растет, так что продолжайте тестирование и не забывайте вносить свой вклад в открытый исходный код !

chart.js
• Он использует тег холста html5, который зависит от пикселей, поэтому при изменении размера сгенерированного графика chart.js вы теряете ясность.
• Это декларативно, это означает, что вам нужно просто объявить необходимые входные данные для создания графика.
• Кривая обучения меньше
• Типы создаваемых диаграмм предопределены и ограничены

d3.js
• Он использует svg, который не зависит от разрешения, поэтому при изменении размера сгенерированного графика d3 вы не потеряете ясность
• Это обязательно, означает, что вам нужно написать некоторую логику для создания диаграмм.
• Крутая кривая обучения
• Типы создаваемых диаграмм не определены заранее, и вы можете создать любую диаграмму, какую захотите.