Как стать автором
Обновить

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
Теги:Highchartsчарты
Хабы: Разработка веб-сайтов
Всего голосов 139: ↑132 и ↓7 +125
Просмотры57K

Похожие публикации

Веб-дизайнер
от 40 000 ₽Территория РостаМожно удаленно
Junior разработчик веб (remote)
от 1 000 до 1 500 $Nitka Technologies, Inc.Можно удаленно
Веб-дизайнер
от 80 000 ₽Синергия-ИнфоМоскваМожно удаленно
Веб-разработчик
от 50 000 до 60 000 ₽CharltonsМожно удаленно
Веб-дизайнер
до 150 000 ₽ITSOFTМоскваМожно удаленно

Лучшие публикации за сутки