Всем привет,давно уже нашел виджет посещалки сайта связанного с Яндекс метрикой, правда там я брал не с источника ,сегодня нашел источник, но там давно не обновляли скрипт , ну и на всякий случай скопировал себе на сайт, а то многое сайты со временем пропадают , уже сталкивался много раз с такой ситуацией .
Возможности
- Строить график на основе массива данных;
- Строить график на основе номер счетчика Яндекс.Метрики;
- Возможна частичная или полная кастомизация внешнего вида Информера;
- График строится с использованием html5 canvas;
Использование
<script src="/informer-0.9.0.js" type="text/javascript"></script>
<canvas id="traffic-widget-ex1" height="70" width="200"></canvas>
<script type="text/javascript">
$informer("traffic-widget-ex1").showStat("CirclesGraph", {
pageviews: [9, 7, 8, 11, 10, 7, 5, 4, 6, 10, 13, 11],
uniques: [3, 2, 4, 6, 5, 3, 2, 1, 3, 5, 8, 7],
current_date: new Date()
});
// или в случае использования Яндекс Метрики:
// $informer("traffic-widget-ex1").showYandexStat("CirclesGraph", "13352758");
</script>
Пример
Методы
Метод | Параметры | Описание |
---|---|---|
$informer(canvasID, [options]) |
| Производит инициализацию модуля, устанавливается обработчик события на движение мышью по холсту; Возвращаемое значение: экземпляр модуля; |
.showStat(graph_type, data, [style]) |
| Производит построение необходимого графика на основе массива данных и настоек вида; |
.showYandexStat(graph_type, counter_id, [style]) |
| Производит построение необходимого графика осуществляя запрос к серверам Яндекс.Метрики
|
.redraw() | - | Перерисовка графики на холсте. |
Настройки модуля
$informer(canvasID, <u><b>options</b></u>)
Параметр | Тип | Значение по умолчанию | Описание |
---|---|---|---|
font | string | '10px Sans-Serif' | Используемый шрифт. |
fontColor | '#97A9B2' | Цвет шрифта. | |
hintBg | color | '#A3B3BB' | Фоновый цвет выплывающей подсказки. |
hintTextColor | color | '#fff' | Цвет шрифта выплывающей подсказки. |
hintScale | int (%) | 120 | Масштаб области вокруг элемента, при котором появляется выплывающая подсказка. |
showCaption | bool | false | Показывать подпись к графику |
caption | string | 'metrika.yandex.com' | Текст подписи к графику. |
showGrid | bool | false | Показывать сетку. |
showDayOfWeek | bool | true | Показывать дни недели. |
weekDays | Array | ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa'] | Массив дней недели. |
showDaysOfMonth | bool | false | Показывать дни месяца. |
var stat1 = $informer('informerID', {font: 'bold 10px Arial', fontColor: '#f00'});
Отображение графика
.<b>showStat</b>(graph_type, data, [style])
.<b>showYandexStat</b>(graph_type, counter_id, [style])
Параметры:
Параметр | Тип | Описание |
---|---|---|
graph_type | string | Тип графика. Доступные типы графиков:
Вы можете использовать один из доступных типов графика или создать свой (инструкция). |
data | object | Данные о числе посетителей и количестве просмотров страниц: data = {pageviews: Array, uniques: Array, current_date: Date} Вы так же можете открыть публичный доступ к своей статистике и использовать |
counter_id | string | Номер счетчика Яндекс.Метрика. Осуществляет запрос за данными о посещаемости на сервера Яндекса, после чего Внимание:
|
style | object | Для каждого типа графика предназначен свой набор стилевого оформления. Стилевое оформление для 'CirclesGraph':
Стилевое оформление для 'BezierGraph':
|
Примеры: Настройки отображения
$informer("traffic-widget-ex2",{
hintBg: 'rgba(184, 55, 55, 0.8)',
hintTextColor: '#fff',
hintScale: 220,
weekDays: new Array('Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб')
})
.showStat("CirclesGraph", {
pageviews: [9, 7, 8, 11, 10, 7, 5, 4, 6, 10, 13, 11],
uniques: [3, 2, 4, 6, 5, 3, 2, 1, 3, 5, 8, 7],
current_date: new Date()
},{
circleRadius: 3,
circleBg: '#A3B3BB'
});
$informer("traffic-widget-ex3", {showGrid:true, hintBg: '#63C0EC'})
.showStat("BezierGraph", {
pageviews: [4, 12, 6, 10, 3, 14, 4],
uniques: [1, 8, 4, 7, 1, 7, 1],
current_date: new Date()
});
Скачать файл informer-0_9_2.zip
Можешь почитать и вот эту статейку "Подключение нестандартных шрифтов на сайт"
Это тоже интересно
- 18.04.193D карусель на bootstrap
- 26.05.21Фоны для сайта на чистом CSS
- 29.05.21Многие помнят теле заставку
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.