Пользователь
0,0
рейтинг
4 января 2010 в 07:57

Разработка → Highcharts: Красивые, динамические чарты за 5 минут!

image
Highcharts — библиотека для создания чартов написанная на JavaScript, позволяет легко добавлять интерактивные, анимированные графики на сайт или в веб-приложение. На данный момент чарты поддерживают большое количество диаграмм линейных, круговых, колоночных рассеивающих и многих других типов.

Чарты работают со всеми популярными браузерами, включая Safari на iPhone.
Минимальная версия для IE составляет 6+. Также браузеры поддерживающие Canvas элемент, и в некоторых случаях SVG для графического рендеринга.
Чарты бесплатны для не коммерческого использования, однако цена для коммерческого использования на одном сайте составляет $80, безлимитное использование 360 долларов. Подробнее

Поддерживаются следующие типы вывода графиков:
line, spline, area, areaspline, column, bar, pie и scatter. и они могут быть комбинированы между друг другом при выводе конечному пользователю, и обладают возможностью отключения любого из них в режиме реального времени непосредственно пользователем для удобства разборки информации.

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

  • Чарты работают на чистом JS и не требуют каких-либо плагинов или Flash;
  • Вывод чартов довольно прост, и они могут быть использованы даже новичками в веб-разработке;
  • Есть увеличение отдельных областей;
  • Поддержка скинов /тем оформлений;
  • Поддержка tooltip с выводом информации;
  • В большинстве типов чартов есть поддержка date-time X-оси;
  • Размер библиотеки ~18кб;

Оффсайт, Галерея Чартов с примерами

image

Пример вывода графика в сопровождающем пост, изображении:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Combination chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
},
tooltip: {
formatter: function() {
var s;
if (this.point.name) { // the pie chart
s = 'Total fruit consumption<br/>'+
this.point.name +': '+ this.y +' fruits';
} else {
s = ''+ this.series.name +'<br/>'+
this.x +': '+ this.y;
}
return s;
}
},
labels: {
items: [{
html: 'Total fruit consumption',
style: {
left: '40px',
top: '8px',
color: 'black'
}
}]
},
series: [{
type: 'column',
name: 'Jane',
data: [3, 2, 1, 3, 4]
}, {
type: 'column',
name: 'John',
data: [2, 3, 5, 7, 6]
}, {
type: 'column',
name: 'Joe',
data: [4, 3, 3, 9, 0]
}, {
type: 'spline',
name: 'Average',
data: [3, 2.67, 3, 6.33, 3.33]
}, {
type: 'pie',
name: 'Total consumption',
data: [{
name: 'Jane',
y: 13,
color: highchartsOptions.colors[0] // Jane's color
}, {
name: 'John',
y: 23,
color: highchartsOptions.colors[1] // John's color
}, {
name: 'Joe',
y: 19,
color: highchartsOptions.colors[2] // Joe's color
}],
center: [100, 80],
size: 100,
showInLegend: false
}]
});


PS: Список других библиотек от StWoland

UPD: тест Safari под рукой оказался только iPod Touch:
image
Илья Миллер @LeeMiller
карма
113,2
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (49)

  • +1
    Красиво и удобно. Must have.
    • +3
      насчет удобства погорячился
      • 0
        ну смотря как рассматривать параметр удобства. код вполне интуитивен, и без наворотов красивые чарты можно сделать чуть ли не методом тыка, и по шаблонам. Как оно дружит с вертской это уже другой вопрос. И да для работы из баз данных придется писать скрипты самому. а в целом библиотека намного лучше представленных на данный момент.
  • 0
    Здорово, мне для проекта как раз такая библиотека требуется!
  • 0
    может кто подскажет ссыльк сервиса, который позволяет подобное онлайн рисовать? кроме гугла )
    спасибо
  • 0
    уже пользуюсь данной библиотекой в одном проекте… все довольны!
  • 0
    прикольно блин, хоть и подтормаживает :) беру на заметку
    • 0
      странно. а в чем это у вас тормозит?
      у меня в ФФ 3.5 все гладко и быстро. поэтому меня эти чарты и заинтересовали, учитывая что анимация отрисовки происходит прям как в Flash.
  • +1
    на первый взгляд очень неплохая штука, на всякий случай сохранил в закладках
  • 0
    Если сравнивать некоммерческие лицензии, вы бы что предпочли — highcharts или amchart (на flash)?
    • 0
      highcharts намного меньше весит, работает без флеш, быстрее настраивается, легче в изучении, и готов работать из коробки, достаточно внести свои данные в примеры, и готово.
    • +2
      минус очевиден, нельзя использовать в стартапе нацеленного на прибыль
      • 0
        За что минус? эту библиотеку действительно нельзя бесплатно использовать в стартапе, который предназначен для извлечения прибыли. Вопросы не ко мне, а к Highcharts лицензии.
      • +1
        если стартап нацелен на прибыль, то 360 баксов, это очень небольшая часть ЗП разработчика, который с этой либой может сделать что-то вменяемое
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Спасибо за сравнение. 8000 точек — это конечно исключительное применение (не очень читабельный график, ага ;).
        Ну и IE тоже не очень интересует, так как нам для админки — юзеры используют только нормальные браузеры.
      • 0
        А зачем Вам отображать 8000 точке? У Вас есть монитор с разрехением 8000 пикселей по горизонтали? :-)
        • НЛО прилетело и опубликовало эту надпись здесь
  • +11
    Добавьте, пожалуйста, парочку ссылок на подобные бесплатные библиотеки.

    Предлагаю вашему вниманию мой список, далеко не полный.

    Условно бесплатные (для некоммерческого использования):
    http://www.jscharts.com/

    Бесплатные, с просьбой о donation:
    LT Diagram Builder

    Бесплатные:
    Flot
    Canvas 3D Graph
    JQuery Visualize Plugin (тормознутый какой-то)
    PlotKit

    Источники:
    http://www.ajaxline.com/10-best-free-javascript-charts-solutions
    http://webtecker.com/2008/06/12/10-free-chart-scripts/
  • +2
    Очень повеселила диаграмма Запасов ядерного оружия СССР(России) и США в галерее чартов:-)
    • 0
      обалдеть. я и не заметил =)
  • –4
    Использую чарты гугла. Просто нет ничего удобнее чем указывать все параметры в GET и получать рисунок ответом. Все вычисления — облачно. Их графики просто нельзя переплюнуть никаким js. Только если придется менять графики без перезагрузки страницы — тогда они будут полезны, это да.
  • 0
    Чарты отличные… Посмотрите, пожалуйста, в сторону www.google.com/finance?&gl=us&hl=en&q=NASDAQ:COMS&client=fss финансовых чартов… японские свечи, баровый график… Я бы сказал для коллекции не хватает :) И динамическую подгрузку при скроллинге если диапазон слишком велик, например…
    • 0
      Да, таких среди бесплатных не найти, а они нужны.
      Вот самое перспективное, что удалось найти: people.iola.dk/olau/flot/examples/visitors.html
      , но там допилить нужно.
  • 0
    Отлично. Посоветую дребеденьгам.
  • 0
    Использовал до этого JS Charts и Flot

    P.S. автор, почему выбрал именно эту?
    • 0
      потому что показалась удобной, функциональной, и не обозретой на хабре.
  • 0
    Очень клево, вот бы вы еще реализовали их и в виде GWT-библиотеки!
  • +3
    Я бы посоветовал взамен портал gramota.ru.

    В заголовке ВСЕ запятые — лишние.

    Что, за, мода, пошла, расставлять, кучу, запятых? (В этом предложении тоже не должно быть ни одной.)
    • 0
      запятая лишняя только после слова чарты. за нее спасибо
      В русском языке запятая используется на письме:
      — при перечислении…
      • 0
        Вам не хватает чувства языка, наверное потому, что вы мало читали в детстве художественной литературы.

        www.gramota.ru/spravka/rules/?rub=zap&text=19_27

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

        С бодрым чувством надежды на новую, лучшую жизнь он в девятом часу ночи подъехал к своему дому.
        Л. Толстой

        Где жаркое волненье, где благородное стремленье и чувств, и мыслей молодых, высоких, нежных, удалых?
        Пушкин

        Стал накрапывать редкий, мелкий дождь.
        Чехов

        Но прилагательные не являются однородными, если предшествующее прилагательное относится ко всему последующему словосочетанию, а не непосредственно к существительному, например:
        Шел длинный товарный поезд.
        Чехов

        За дорогой – стриженая липовая аллея.
        Л. Толстой

        Были в конторе старые висячие стенные часы.
        Л. Толстой
        • 0
          а вам, наверное, все же чувства такта, так как такие вещи обычно говорят лично, а не выставляя на всеобщее обозрение.
          • 0
            Я слышал, что хабр не базар, но видя как люди приходят в тему с чартами, а обсуждают русский язык, мне кажется что люди не понимают значения слов базар и флуд
  • –2
    Шел длинный товарный поезд. это круто, Только товарный это его спецификация, а длинна это его внешнее описание.

    Только чарты не динамически красивы, они динамические, красивые. И еще много какими могут быть. Я бы перечислил третьим определением, но не хотел перегружать тайтл.

    Вы бы лучше следили за теми, кто вообще не знает что такое запятые. А придираться к одной запятой, увольте. За вторую я сказал спасибо.
    • 0
      1. Отвечайте в реплике на то сообщение, которое вам было адресовано, а не начинайте новый тред.

      2. Вот так будет понятнее: «красивые (динамические чарты)».

      Динамические чарты — красивые. Не красивые чарты — динамические, а наоборот.

      То же самое: «красивые зелёные динамические чарты», «большие красивые зелёные динамические чарты», «вертикальные большие красивые зелёные динамические чарты», «сгенерированные вертикальные большие красивые зелёные динамические чарты» — и НИГДЕ не нужны запятые, прикиньте?

      А вот тут, например, нужны: «весёлые, красивые динамические чарты».

      Впрочем, хотите остаться воинственно безграмотным, то дело ваше.
      • –2
        да когда вы успокоитесь, они не «красивые динамические» они красивые и динамические. Я уже понял, что спорить с вами бесполезно. Вы даже в докторе Хаусе несоответствия ищите, как будто вы верите в то, что там происходит при первом просмотре, а потом понимаете что вас обманули. Не пытайтесь идеализировать мир, у вас ничего не получится. Без ляпов и ошибок не будет ничего, что нас развлекает и может разнообразить жизнь. Учите лучше юных людей, которые вообще не умеют разделять свои мысли.
        • +1
          Ок. Прилагательное «красивые» подходит к объекту «динамические чарты»? Не просто к «чарты», а к «динамические чарты»?
  • 0
    Ура, нашел, что искал! :) extra.amcharts.com/editor/
    Вот например — extra.amcharts.com/editor/column/
  • 0
    Вот бы его использовали в Google Analytics вместо флеша (:
  • 0
    Отличная библиотека. Активно использую в своих сервисах.
    Натолкнулся на проблему — после создания графика программно изменяю его заголовок таким кодом:

    this.chart.setTitle({text:"Заголовок"})

    Но когда экспортирую этот график в файлы (png,pdf...) ее стандартными средствами экспорта (кнопки справа вверху), то отображается не измененный заголовок, а тот, который был указан при создании графика.
    Может кто-то встречался с подобной проблемой и решил ее?
    • 0
      Ну вот, решаешь проблему пару часов, уже руки опускаются. А как обратишься за консультацией, дак через пару минут сам решишь проблему. В общем нужно использовать такой код для решения проблемы:

      var s='Новый заголовок'
      this.chart.setTitle({text:s})
      this.chart.options.title.text=s

      Может кому пригодится
  • 0
    Я тут для одного своего проекта на коленке замучился искать, как вывести несколько графиков на одной странице.

    Допустим:
    1. Температура на улице
    2. Температура в доме
    3. Температура процессора

    Один график запросто, несколько не могу. Подскажите пожалуйста. Доки для меня довольно сложны, я практически не знаю английский язык.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.