The OpenNET Project / Index page

[ новости /+++ | форум | теги | ]

Открыт код GraphicsJS, JavaScript-библиотеки для формирования графики и анимации

15.09.2016 15:46

Иркутская компания AnyChart перевела проект GraphicsJS, в рамках которого подготовлена открытая JavaScript-библиотека для рисования любой HTML5 графики и анимации на основе SVG/VML, в разряд открытых проектов. По количеству и качеству возможностей GraphicsJS превосходит такие популярные библиотеки для векторной графики, как Raphaël и Bonsai. Код GraphicsJS открыт под лицензией BSD.

GraphicsJS предоставляет средства для рисования линий, в том числе с использованием кривых Безье, инструменты для работы с многострочным текстом, умную систему слоев с z-индексом, независимый от браузеров движок для трансформаций, виртуальный 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, цель которого – предоставить всем программистам из любых стран доступ к нашим передовым разработкам и возможность участвовать в их дальнейшем совершенствовании".

  1. Главная ссылка к новости (http://www.anychart.com/blog/2...)
Автор новости: Андрей Хачатуров
Лицензия: CC BY 3.0
Короткая ссылка: https://opennet.ru/45155-javascript
Ключевые слова: javascript, graph, graphicsjs
При перепечатке указание ссылки на opennet.ru обязательно


Обсуждение (21) Ajax | 1 уровень | Линейный | +/- | Раскрыть всё | RSS
  • 1.1, inferrna (ok), 19:07, 15/09/2016 [ответить] [﹢﹢﹢] [ · · · ]  
  • –1 +/
    Чем это лучше d3.js ?
     
     
  • 2.2, эцсамое (?), 19:25, 15/09/2016 [^] [^^] [^^^] [ответить]  
  • +/
    я могу ошибаться, но их некорректно сравнивать.

    d3 рисует растр в canvas, raphael и это рисуют векторными элементами.

     
     
  • 3.9, Ан (??), 23:21, 15/09/2016 [^] [^^] [^^^] [ответить]  
  • +/
    >d3 рисует растр в canvas

    Видел проект в котором d3 рисовал в svg. Так что это не верно.

     
  • 2.3, Андрей (??), 19:26, 15/09/2016 [^] [^^] [^^^] [ответить]  
  • +3 +/
    D3 - это чисто data visualization. Там нет графического движка, нечем рисовать. Используются методы SVG и всё.
    GraphicsJS - это именно для рисования чего угодно. Как Raphael и Bonsai, только с бОльшими возможностями: в GraphicsJS не только кривые Безье, а всё что угодно "из коробки", свой движок для трансформаций, куча возможностей для работы с текстом (многострочные тексты поддерживаются, можно измерять тексты и т.д.), умная система слоев с z-индексом, крутой API, виртуальный DOM, которое дает отличную скорость, поддержка IE6+. Посмотрите сайт http://www.graphicsjs.org - там всё есть: и демо, и фичи, и ссылки на документацию, API, и прочее. И обязательно попробуйте в деле;)
     
     
  • 3.5, inferrna (ok), 19:40, 15/09/2016 [^] [^^] [^^^] [ответить]  
  • –1 +/
    d3 рисует в канвасе и в svg, поддерживает кучу втроенных методов для рисования чего угодно. То, что я увидел у вас, работает примерно на том же низовом уровне, что и d3.
    чарты:
    http://jsfiddle.net/tommy351/P4Z75/
    https://jsfiddle.net/ragingsquirrel3/qkHK6/
    с текстом http://jsfiddle.net/2UypN/

    красивые часики обратного отсчёта
    https://jsfiddle.net/inferrna/j5w3v3bL/

     
  • 3.7, Вы забыли заполнить поле Name (?), 22:06, 15/09/2016 [^] [^^] [^^^] [ответить]  
  • +/
    И прям никаких минусов нет у GraphicsJS?
     
     
  • 4.8, Аноним (-), 22:22, 15/09/2016 [^] [^^] [^^^] [ответить]  
  • +/
    Интерсивная анимация http://playground.anychart.com/gallery/latest/Graphics/Galaxy-iframe чуть не подвесила мой Firefox.
     
     
  • 5.11, Аноним (-), 00:40, 16/09/2016 [^] [^^] [^^^] [ответить]  
  • –1 +/
    > чуть не подвесила мой Firefox.

    FF встает колом от апдейта всего лишь трех прогрессбаров из стандартного бутстрапа 1 раз в секунду. Проц в потолок, браузер дергается. Крутой у них там DOM. Blink/webkit при этом даже 5% процессора не занимают и для них это вообще не нагрузка. Зато по бенчмаркам FF сам Лев Толстой.

     
  • 5.15, langley (?), 06:02, 16/09/2016 [^] [^^] [^^^] [ответить]  
  • +/
    > Интерсивная анимация http://playground.anychart.com/gallery/latest/Graphics/Galaxy-iframe
    > чуть не подвесила мой Firefox.

    Mac OS, последний FF, все прекрасно.

     
  • 5.17, Qwerty (??), 07:17, 16/09/2016 [^] [^^] [^^^] [ответить]  
  • –2 +/
    > Интерсивная анимация http://playground.anychart.com/gallery/latest/Graphics/Galaxy-iframe
    > чуть не подвесила мой Firefox.

    Win 10, FF 47.0.1
    Полёт отличный...

     
     
  • 6.22, Аноним (-), 23:21, 16/09/2016 [^] [^^] [^^^] [ответить]  
  • +1 +/
    Все проще, пользователи винды привыкли к тормозам. У тебя еще поди и каспер стоит? С ним лаги системы на 2 секунды вскоре начинают восприниматься как должное.
     
     
  • 7.24, Аноним (-), 02:52, 19/09/2016 [^] [^^] [^^^] [ответить]  
  • +/
    клоун: А ты, небось, всё ещё не накопил на новый проц и сидишь на своём любимом Pentium 2. Неудивительно что у тебя всё тормозит и только консоль "летает".
     
  • 5.19, Аноним (-), 11:12, 16/09/2016 [^] [^^] [^^^] [ответить]  
  • +/
    > Интерсивная анимация http://playground.anychart.com/gallery/latest/Graphics/Galaxy-iframe
    > чуть не подвесила мой Firefox.

    Гм, у меня fedora-22 FF 47.0 загрузка проца средняя - 27-28% - никакого зависона (но одно ядро из 4 занято на 99% - поэтому если у вас одноядерный проц - то тормоза неизбежны)

     

  • 1.4, inferrna (ok), 19:30, 15/09/2016 [ответить] [﹢﹢﹢] [ · · · ]  
  • +/
    Глянул код на http://playground.anychart.com/gallery/7.11.1/Graphics/Animals_Activity-plain
    это, вроде как, сделано с использованием чартовой либы. Господа, если у вас либа для отрисовки чартов - ккого хрена в ней нет функции для автоотрисовки линии до лейбла?
    for (var i = 0; i < points.length; i++) piece.lineTo(points[i][0], points[i][1]);
    шедеврально же, эту линию даже отрисовываем скачками по точкам в цикле. Вам за это ещё даже платят?
     
     
  • 2.13, blackart (?), 04:45, 16/09/2016 [^] [^^] [^^^] [ответить]  
  • +/
    > Глянул код на http://playground.anychart.com/gallery/7.11.1/Graphics/Animals_Activity-plain
    > это, вроде как, сделано с использованием чартовой либы. Господа, если у вас
    > либа для отрисовки чартов - ккого хрена в ней нет функции
    > для автоотрисовки линии до лейбла?

    В примере графики и легенда сделаны с помощью чартовой либы, а дерево с птицами и их коннекторами сделаны с помощью 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, и эти линии тоже. Линии в примере могут состоять из разного количества точек, в функцию приходит массим из них, не вижу ничего криминального в использовании цикла в этом случае, точек мало, но длина массива может быть разной.


     

  • 1.10, Аноним (-), 00:29, 16/09/2016 [ответить] [﹢﹢﹢] [ · · · ]  
  • +/
    А кто подскажет маленькое и легкое рисование симпатичных графиков и чартов на JS, с открытой лицензией? (GPL/MIT/BSD/Apache)
     
     
  • 2.12, Аноним (-), 00:48, 16/09/2016 [^] [^^] [^^^] [ответить]  
  • +/
    Есть chartjs, есть d3js и всякое поверх него (c3js, nvd3 и так далее).
    Не то, чтобы прямо маленькие и легкие, но тут вряд ли получится сделать универсально меньшим объемом кода.
     
  • 2.20, Аноним (-), 11:21, 16/09/2016 [^] [^^] [^^^] [ответить]  
  • +/
    > А кто подскажет маленькое и легкое рисование симпатичных графиков и чартов на
    > JS, с открытой лицензией? (GPL/MIT/BSD/Apache)

    Посмотри flotcharts.org

     

  • 1.14, Аноним (14), 05:57, 16/09/2016 [ответить] [﹢﹢﹢] [ · · · ]  
  • +/
    А как можно открыть код яваскрипт? Он может быть обфусцирован, но всегда открыт - иначе же работать не будет.
     
     
  • 2.16, langley (?), 06:04, 16/09/2016 [^] [^^] [^^^] [ответить]  
  • +/
    > А как можно открыть код яваскрипт? Он может быть обфусцирован, но всегда
    > открыт - иначе же работать не будет.

    Открытие исходного кода подразумевает готовность к тому, чтобы его правили и пулл-реквестили сторонние разработчики.
    Обфусцированный код не поправишь просто так.

     
  • 2.21, Аноним (-), 20:21, 16/09/2016 [^] [^^] [^^^] [ответить]  
  • +/
    Как бинарный файл может быть закрытым ? Дизассемблер в зубы и вперед!
     

     Добавить комментарий
    Имя:
    E-Mail:
    Текст:



    Партнёры:
    PostgresPro
    Inferno Solutions
    Hosting by Hoster.ru
    Хостинг:

    Закладки на сайте
    Проследить за страницей
    Created 1996-2024 by Maxim Chirkov
    Добавить, Поддержать, Вебмастеру