The OpenNET Project / Index page

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

Представлена Chart.js, JavaScript-библиотека для построения графиков

21.03.2013 10:09

Представлена новая JavaScript-библиотека Chart.js, позволяющая генерировать на стороне клиента визуально привлекательные графики и диаграммы с использованием средств HTML5 (canvas). Библиотека поддерживает создание 6 типов диаграмм (линейные графики, столбцы, кривые, круговые и радиальные диаграммы) и отличается небольшим размером (4.5 Кб в сжатом виде) и гибкостью в плане кастомизации отображения графиков. Поддерживается использование анимированных эффектов. Код открыт под лицензией MIT.

Интересно, что изначально код был опубликован 18 марта, после чего сайт был закрыт из-за претензии о наличии интеллектуальной собственности со стороны работодателя разработчика бибилотеки. Теперь вопрос улажен и Chart.js вновь возвращён в открытый доступ, при этом лицензия была изменена на MIT.



  1. Главная ссылка к новости (http://www.chartjs.org/...)
Лицензия: CC BY 3.0
Короткая ссылка: https://opennet.ru/36456-javascript
Ключевые слова: javascript, web, graph, chart, html5
При перепечатке указание ссылки на opennet.ru обязательно


Обсуждение (27) Ajax | 1 уровень | Линейный | +/- | Раскрыть всё | RSS
  • 1.1, Аноним (-), 13:44, 21/03/2013 [ответить] [﹢﹢﹢] [ · · · ]  
  • –1 +/
    "и отличается небольшим размером (4.5 Кб в сжатом виде)"
    хмм ошибочка?

    https://github.com/nnnick/Chart.js/blob/master/Chart.min.js
    "file 40 lines (40 sloc) 20.034 kb "

     
     
  • 2.2, Аноным (ok), 13:48, 21/03/2013 [^] [^^] [^^^] [ответить]  
  • +/
    Гзип?
     
  • 2.3, Аноним (-), 13:51, 21/03/2013 [^] [^^] [^^^] [ответить]  
  • +1 +/
    в сжатом виде == min + gzip
     

  • 1.4, Аноним (-), 13:54, 21/03/2013 [ответить] [﹢﹢﹢] [ · · · ]  
  • +/
    Есть http://www.jqplot.com/. Чем этот лучше?
     
     
  • 2.5, Grmmhnd (?), 14:02, 21/03/2013 [^] [^^] [^^^] [ответить]  
  • +6 +/
    Хотя бы тем, что не требует jquery.
     
  • 2.6, angra (ok), 14:24, 21/03/2013 [^] [^^] [^^^] [ответить]  
  • +4 +/
    Как по мне что тот, что другой выглядят оборванцами на фоне http://www.highcharts.com/, но это не означает, что они не будут более подходящими для определенных задач. Кого-то привлечет лицензия, кого-то меньший объем.
     
  • 2.15, Александр (??), 00:56, 22/03/2013 [^] [^^] [^^^] [ответить]  
  • +/
    ерунда какая-то ейбогу..
     

  • 1.7, Аноним (-), 17:11, 21/03/2013 [ответить] [﹢﹢﹢] [ · · · ]  
  • +/
    Чем он лучше http://humblesoftware.com/flotr2/index ?
     
  • 1.8, valexey (?), 17:40, 21/03/2013 [ответить] [﹢﹢﹢] [ · · · ]  
  • –2 +/
    А вот няшечка для реалтаймовых графиков: http://smoothiecharts.org/
     
     
  • 2.9, Аноним (-), 18:12, 21/03/2013 [^] [^^] [^^^] [ответить]  
  • +/
    Открыв страницу с примером c 1-2% утилизация цпу подскочила до 15-16%. На дворе шёл 21 век, А10-5800 и "реалтаймовый" рисовальщик 2д-графиков в браузере.
     
     
  • 3.10, valexey (?), 18:27, 21/03/2013 [^] [^^] [^^^] [ответить]  
  • +/
    Если убрать закраску графиков, то будет меньше. Если отрубить интерполяция и выводить данные как есть, то будет еще меньше.

    У меня в проекте три достаточно больших графика рисуются в реалтайме причем там добавляется порядка 50-100 точек в секунду. Рисует вполне удовлетворительно. Собственно оно даже на iPad2 вполне смотрибельно получается.

    Если делать то же на скажем jfreechart или скажем Qwt(http://qwt.sourceforge.net/) то загрузка процессора получается выше (до 100% подскакивает временами).

    Реалтайм графики это вообще отдельная песня (с высокими частотами обновления, а не 5 раз в секунду). Библиотек для них практически нет.

     
     
  • 4.11, Crazy Alex (??), 18:46, 21/03/2013 [^] [^^] [^^^] [ответить]  
  • +/
    интереса ради - а где есть необходимость обновлять графики чаще чем 5 раз в секунду?
     
     
  • 5.12, Аноним (-), 20:06, 21/03/2013 [^] [^^] [^^^] [ответить]  
  • +/
    WebSocket realtime node.js application наверно
     
     
  • 6.18, valexey (?), 05:32, 22/03/2013 [^] [^^] [^^^] [ответить]  
  • +/
    > WebSocket realtime node.js application наверно

    Нет, node.js не используется.

     
  • 5.13, Аноним (-), 22:43, 21/03/2013 [^] [^^] [^^^] [ответить]  
  • +/
    Фишка не в обновлении 5 раз в секунду, а сколько затрачивается ресурсов для этого.
     
     
  • 6.16, Crazy Alex (??), 01:36, 22/03/2013 [^] [^^] [^^^] [ответить]  
  • +/
    Ну просто если б я что-то подобное делал - то плевать с какой скоростью летят данные, сам график перерисовывать больше тех же пяти раз в секунду смысла нет - на него ж человеку смотреть. Может и двух раз хватит, тут уже экспериментировать надо. Соответственно и затраты ресурсов будут ну никак не пропорциональные количеству прилетевших данных.
     
     
  • 7.19, valexey (?), 05:34, 22/03/2013 [^] [^^] [^^^] [ответить]  
  • +1 +/
    > Ну просто если б я что-то подобное делал - то плевать с
    > какой скоростью летят данные, сам график перерисовывать больше тех же пяти
    > раз в секунду смысла нет - на него ж человеку смотреть.
    > Может и двух раз хватит, тут уже экспериментировать надо. Соответственно и
    > затраты ресурсов будут ну никак не пропорциональные количеству прилетевших данных.

    Реалтайм отображение фотоплетизмограммы. Если слово не знакомо, то представь себе ЭКГ-монитор, вот примерно то же самое по внешнему виду и требованиям, но данные немного иначе получаются.

    Вообще, в идеале, там нужно бы 60 кадров в секунду, чтобы не раздражало оператора. На экране одновременно отображается порядка 8 секунд данных.

     
  • 5.20, valexey (?), 05:35, 22/03/2013 [^] [^^] [^^^] [ответить]  
  • +/
    > интереса ради - а где есть необходимость обновлять графики чаще чем 5
    > раз в секунду?

    Медицина. Отображение фотоплетизмограммы в реальном времени.

     
     
  • 6.21, angra (ok), 17:04, 22/03/2013 [^] [^^] [^^^] [ответить]  
  • +/
    Понятно, в следующий раз выражайся яснее. Между "обновить график" и "дорисовать график" большая разница. Обновлять график, то есть замещать его полностью новым, чаще пары раз в секунду не нужно.
     
     
  • 7.22, valexey (?), 17:27, 22/03/2013 [^] [^^] [^^^] [ответить]  
  • +/
    Я имел ввиду естественно sample rate относительно того, что касается данных и refresh rate то что касается отрисовки графика..

    И нет, график там не дорисовывается, а перерисовывается на каждом кадре. А когда приходят новые данные, тогда , эти данные добавляются в график а часть старых данных выкидывается (то есть по сути имеем очередь фиксированной длины куда суются данные).

    Естественно поступление данные и перерисовка графика друг на друга не завязаны, то есть это дело асинхронно работает.

     
  • 3.14, XoRe (ok), 23:00, 21/03/2013 [^] [^^] [^^^] [ответить]  
  • –3 +/
    > Открыв страницу с примером c 1-2% утилизация цпу подскочила до 15-16%. На
    > дворе шёл 21 век, А10-5800 и "реалтаймовый" рисовальщик 2д-графиков в браузере.

    А что вы хотели?
    svg+js проц кушать любят будь здоров.

     
     
  • 4.17, valexey (?), 05:30, 22/03/2013 [^] [^^] [^^^] [ответить]  
  • +2 +/
    Там не svg, там canvas
     

  • 1.23, Аноним (-), 19:15, 22/03/2013 [ответить] [﹢﹢﹢] [ · · · ]  
  • +/
    Ну и как с етим нарисовать график из CSV данных?
     
     
  • 2.24, Grmmhnd (?), 21:42, 22/03/2013 [^] [^^] [^^^] [ответить]  
  • +1 +/
    А вам не кажется, что это проблема реализации бэкэнда, а не фронтендной библиотеки?
     
  • 2.25, Аноним (-), 15:57, 23/03/2013 [^] [^^] [^^^] [ответить]  
  • +/
    http://d3js.org/
     
     
  • 3.26, Аноним (-), 16:36, 23/03/2013 [^] [^^] [^^^] [ответить]  
  • +/
    > http://d3js.org/
    >>> f = open('sample.csv').readlines()
    >>> rv = json.dumps([[float(i) for i in k.split(',')] for k in f])
    >>> file_out.write(rv)
     

  • 1.27, serge78rus (ok), 22:17, 03/05/2014 [ответить] [﹢﹢﹢] [ · · · ]  
  • +/
    Гораздо менее функциональный, но легкий компонент для отрисовки графиков в реальном времени http://jsgadget.ru/jschart.html
     
     Добавить комментарий
    Имя:
    E-Mail:
    Текст:



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

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