Сравнение между Д3.js и диаграмма.js (только для диаграмм)

Question

Сравнение между Д3.js и диаграмма.js (только для диаграмм)

Я использовал диаграмму.js в моих проектах несколько раз, но я никогда не использовал d3.js. Многие люди говорят, что d3.js-лучшая структура javascript для диаграмм, но никто из них не может объяснить, почему, особенно когда я хочу сравнить диаграмму.js.

Я нашел это:http://www.fusioncharts.com/javascript-charting-comparison/
но это не то, что я искал.

кто-нибудь знает о сравнении этих рамок с точки зрения удобство использования и производительность (только для диаграмм)?

583 3

javascript chart.js

3 ответов:

Comments

Ничего не найдено.

Mark · Accepted Answer · 2018-08-04 18:09:25

d3.js Это не "библиотека диаграмм". это библиотека для создания и управления SVG / HTML. Он предоставляет инструменты, которые помогут вам визуализировать и управлять своими данными. В то время как вы можете использовать его для создания обычных графиков (бар, линия, пирог, и т. д...) он способен на гораздо большее. Конечно, с этим "способным на многое" приходит более крутая кривая обучения. Есть много обычных библиотек диаграмм, построенных поверх 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 - вы хотите, чтобы эта точка была зеленой сейчас, просто измените ее. С холстом его статический рисунок, который должен был быть перерисован, чтобы внести какие - либо изменения-конечно, он рисует так быстро, что вы обычно никогда не заметите. Вот это хорошее чтение из Microsoft.

the_red_baron · Accepted Answer · 2016-11-23 03:32:16

обновлено 2016

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

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

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

несколько других библиотек графиков находятся на подъеме, так держать испытания и не забудьте внести свой вклад в open source!

haferblues · Accepted Answer · 2017-09-25 14:13:26

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

c3, который основан на d3 и поэтому использует SVG

диаграмма.js, который использует canvas

диаграммы загружаются внутри компонента WebView внутри собственного приложения, и все данные (включая библиотеку JS) являются локальными, поэтому не замедляются из-за HTTP-запросов. Чтобы увеличить производительность еще больше, я дополнительно помещаю все в один файл.

Я загрузил 4 диаграммы (line, bar, pie, line/bar combo) вместе с примерно 500 точками данных.

мои измерения времени исключили фактическую загрузку html-страницы. Я измерил форму в тот момент, когда я начал использовать код библиотеки диаграмм до конца рендеринга. Вся анимация диаграммы была отключена.

C3 занял около 1500-1800 МС на современном Android и IPhone устройств. iPhone выполнил около 100 мс лучше, чем Android.

диаграмма.js занял около 400-800ms. Android выполнил около 300ms лучше, чем iPhone.

неудивительно, что SVG работает медленнее. В зависимости от вашего варианта использования, возможно, слишком медленно.

на настольном компьютере рендеринга в c3 было около 150-200ms и диаграммы.js около 80-100ms. запуск того же теста в эмуляторе Android и iPhone имел тот же результат, что и на рабочем столе. Таким образом, замедление на мобильных устройствах определенно из-за ограничений аппаратного обеспечения/обработки.

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