Иркутская компания AnyChart перевела (http://www.anychart.com/blog/2016/09/15/anychart-open-source.../) проект GraphicsJS (http://www.graphicsjs.org/), в рамках которого подготовлена открытая JavaScript-библиотека для рисования любой HTML5 графики и анимации на основе SVG/VML, в разряд открытых проектов. По количеству и качеству возможностей GraphicsJS превосходит такие популярные библиотеки для векторной графики, как Raphaël (https://github.com/DmitryBaranovskiy/raphael) и Bonsai (https://github.com/uxebu/bonsai). Код GraphicsJS открыт (https://github.com/anychart/graphicsjs) под лицензией BSD.
GraphicsJS предоставляет средства для рисования линий, в том числе с использованием кривых Безье, инструменты для работы с многострочным текстом, умную систему слоев с z-индексом, независимый от браузеров движок для трансформаций, Virtual DOM для отрисовки по необходимости, а также удобный и лаконичный API c поддержкой "chaining". Особенностью GraphicsJS также является возможность работы даже при использовании старых браузеров, включая Internet Explorer 6+, Chrome 1+ и Firefox 2+.
GraphicsJS разрабатывался и ранее применялся как графический движок в коммерческих библиотеках для построения всевозможных диаграмм, предлагаемых AnyChart: AnyChart (графики), AnyMap (карты), AnyStock (финансовые графики) и AnyGantt (диаграммы Ганта), т.е. проект уже используется для визуализации данных корпорациями Oracle, Microsoft, Volkswagen, AT&T, Samsung, BP, Bosch, Merck, Reuters, Bank of China и другими клиентами компании, включая более 70% предприятий из списка Fortune 1000.
Роман Любушкин, глава R&D в AnyChart, уточнил, что "интерактивная визуализация данных – это лишь один из многочисленных вариантов использования библиотеки GraphicsJS. Ее можно применять для создания абсолютно любых графических моделей и решений, включая анимированные изображения, мультфильмы, инфографику, майндмэппинг и так далее. Открытие кода графического движка AnyChart – это первый шаг на пути к открытию всех решений AnyChart, цель которого – предоставить всем программистам из любых стран доступ к нашим передовым разработкам и возможность участвовать в их дальнейшем совершенствовании".
URL: http://www.anychart.com/blog/2016/09/15/anychart-open-source.../
Новость: https://www.opennet.ru/opennews/art.shtml?num=45155
Чем это лучше d3.js ?
я могу ошибаться, но их некорректно сравнивать.d3 рисует растр в canvas, raphael и это рисуют векторными элементами.
>d3 рисует растр в canvasВидел проект в котором d3 рисовал в svg. Так что это не верно.
D3 - это чисто data visualization. Там нет графического движка, нечем рисовать. Используются методы SVG и всё.
GraphicsJS - это именно для рисования чего угодно. Как Raphael и Bonsai, только с бОльшими возможностями: в GraphicsJS не только кривые Безье, а всё что угодно "из коробки", свой движок для трансформаций, куча возможностей для работы с текстом (многострочные тексты поддерживаются, можно измерять тексты и т.д.), умная система слоев с z-индексом, крутой API, виртуальный DOM, которое дает отличную скорость, поддержка IE6+. Посмотрите сайт http://www.graphicsjs.org - там всё есть: и демо, и фичи, и ссылки на документацию, API, и прочее. И обязательно попробуйте в деле;)
d3 рисует в канвасе и в svg, поддерживает кучу втроенных методов для рисования чего угодно. То, что я увидел у вас, работает примерно на том же низовом уровне, что и d3.
чарты:
http://jsfiddle.net/tommy351/P4Z75/
https://jsfiddle.net/ragingsquirrel3/qkHK6/
с текстом http://jsfiddle.net/2UypN/красивые часики обратного отсчёта
https://jsfiddle.net/inferrna/j5w3v3bL/
И прям никаких минусов нет у GraphicsJS?
Интерсивная анимация http://playground.anychart.com/gallery/latest/Graphics/Galax... чуть не подвесила мой Firefox.
> чуть не подвесила мой Firefox.FF встает колом от апдейта всего лишь трех прогрессбаров из стандартного бутстрапа 1 раз в секунду. Проц в потолок, браузер дергается. Крутой у них там DOM. Blink/webkit при этом даже 5% процессора не занимают и для них это вообще не нагрузка. Зато по бенчмаркам FF сам Лев Толстой.
> Интерсивная анимация http://playground.anychart.com/gallery/latest/Graphics/Galax...
> чуть не подвесила мой Firefox.Mac OS, последний FF, все прекрасно.
> Интерсивная анимация http://playground.anychart.com/gallery/latest/Graphics/Galax...
> чуть не подвесила мой Firefox.Win 10, FF 47.0.1
Полёт отличный...
Все проще, пользователи винды привыкли к тормозам. У тебя еще поди и каспер стоит? С ним лаги системы на 2 секунды вскоре начинают восприниматься как должное.
клоун: А ты, небось, всё ещё не накопил на новый проц и сидишь на своём любимом Pentium 2. Неудивительно что у тебя всё тормозит и только консоль "летает".
> Интерсивная анимация http://playground.anychart.com/gallery/latest/Graphics/Galax...
> чуть не подвесила мой Firefox.Гм, у меня fedora-22 FF 47.0 загрузка проца средняя - 27-28% - никакого зависона (но одно ядро из 4 занято на 99% - поэтому если у вас одноядерный проц - то тормоза неизбежны)
Глянул код на http://playground.anychart.com/gallery/7.11.1/Graphics/Anima...
это, вроде как, сделано с использованием чартовой либы. Господа, если у вас либа для отрисовки чартов - ккого хрена в ней нет функции для автоотрисовки линии до лейбла?
for (var i = 0; i < points.length; i++) piece.lineTo(points[i][0], points[i][1]);
шедеврально же, эту линию даже отрисовываем скачками по точкам в цикле. Вам за это ещё даже платят?
> Глянул код на http://playground.anychart.com/gallery/7.11.1/Graphics/Anima...
> это, вроде как, сделано с использованием чартовой либы. Господа, если у вас
> либа для отрисовки чартов - ккого хрена в ней нет функции
> для автоотрисовки линии до лейбла?В примере графики и легенда сделаны с помощью чартовой либы, а дерево с птицами и их коннекторами сделаны с помощью GraphicsJS, он инициальзируется в самом начале как:
var g = acgraph;
// create stage
stage = g.create("container");В самом anychart компоненте конечно есть лейблы и коннекторы к ним. Пример показывает кастомное рисовние, когда необходимо нарисовать что-то не стандартное, чего не может чартовая либа. В GraphicsJS есть только графические примитивы, он не знает ничего про лейбыл и коннекторы, у него есть линии, круги, заливка картинкой, текст.
> for (var i = 0; i < points.length; i++) piece.lineTo(points[i][0], points[i][1]);
> шедеврально же, эту линию даже отрисовываем скачками по точкам в цикле. Вам
> за это ещё даже платят?Все, кроме графиков отрисовывается вручную с помощью GraphicsJS, и эти линии тоже. Линии в примере могут состоять из разного количества точек, в функцию приходит массим из них, не вижу ничего криминального в использовании цикла в этом случае, точек мало, но длина массива может быть разной.
А кто подскажет маленькое и легкое рисование симпатичных графиков и чартов на JS, с открытой лицензией? (GPL/MIT/BSD/Apache)
Есть chartjs, есть d3js и всякое поверх него (c3js, nvd3 и так далее).
Не то, чтобы прямо маленькие и легкие, но тут вряд ли получится сделать универсально меньшим объемом кода.
> А кто подскажет маленькое и легкое рисование симпатичных графиков и чартов на
> JS, с открытой лицензией? (GPL/MIT/BSD/Apache)Посмотри flotcharts.org
А как можно открыть код яваскрипт? Он может быть обфусцирован, но всегда открыт - иначе же работать не будет.
> А как можно открыть код яваскрипт? Он может быть обфусцирован, но всегда
> открыт - иначе же работать не будет.Открытие исходного кода подразумевает готовность к тому, чтобы его правили и пулл-реквестили сторонние разработчики.
Обфусцированный код не поправишь просто так.
Как бинарный файл может быть закрытым ? Дизассемблер в зубы и вперед!