Виджет посещаемости сайта на html5 canvas

    Возможности

    • Строить график на основе массива данных;
    • Строить график на основе номер счетчика Яндекс.Метрики;
    • Возможна частичная или полная кастомизация внешнего вида Информера;
    • График строится с использованием html5 canvas;

    Использование

    Пример


    Методы

    Метод Параметры Описание
    $informer(canvasID, [options])
    • canvasID (string) – ID элемента холста (canvas) на странице;
    • options (object) (не обязательный) – Перечень настроек;
    Производит инициализацию модуля, устанавливается обработчик события на движение мышью по холсту;
    Возвращаемое значение: экземпляр модуля;
    .showStat(graph_type, data, [style])
    • graph_type (string) – тип выводимого графика;
    • data (object) – данные для построения графика (посетители, просмотры страниц, текущая дата);
    • style (object) (не обязательный) – перечень настроек стилевого оформления;
    Производит построение необходимого графика на основе массива данных и настоек вида;
    .showYandexStat(graph_type, counter_id, [style])
    • graph_type (string) – тип выводимого графика;
    • counter (string) – номер счетчика Яндекс.Метрика;
    • style (object) (не обязательный) – перечень настроек стилевого оформления;

    Производит построение необходимого графика осуществляя запрос к серверам Яндекс.Метрики за данными о посещениях сайта.

    Внимание:
    • Должен быть установлен код счетчика;
    • Должна быть активирована опция «Информер»;
    • Должна быть активирована опция «Показывать данные информера» на вкладке Доступ;
    • Подробнее.
    .redraw() - Перерисовка графики на холсте.

    Настройки модуля

    $informer(canvasID, options)

    Параметр Тип Значение по умолчанию Описание
    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'});


    Отображение графика

    .showStat(graph_type, data, [style])

    .showYandexStat(graph_type, counter_id, [style])

    Параметры:

    Параметр Тип Описание
    graph_type string Тип графика. Доступные типы графиков:
    • 'CirclesGraph' – окружности соединенные линиями

    Вы можете использовать один из доступных типов графика или создать свой (инструкция). У каждого типа графика свой набор стилей.

    data object

    Данные о числе посетителей и количестве просмотров страниц:

    data = {pageviews: Array, uniques: Array, current_date: Date}

    Вы так же можете открыть публичный доступ к своей статистике и использовать API Яндекс Метрики для обращения за данными о посещаемости сайта.

    counter_id string

    Номер счетчика Яндекс.Метрика.

    Осуществляет запрос за данными о посещаемости на сервера Яндекса, после чего формируется набор данных о просмотрах страниц и вызывает метод showStat(..).

    Внимание:

    • Должен быть установлен код счетчика;
    • Должна быть активирована опция «Информер»;
    • Должна быть активирована опция «Показывать данные информера» на вкладке Доступ;
    • Запросы должны осуществляться с того же домена для которого установлен счетчик.
    style object

    Для каждого типа графика предназначен свой набор стилевого оформления.

    Стилевое оформление для 'CirclesGraph':

    • lineWidth - (0.5) толщина линии;
    • lineColor - ('#A3B3BB') цвет линии;
    • circleRadius - (4) радиус окружности;
    • circleBg - ('#F5F5F5') заливка окружности;
    • circleBorderColor - ('#97A9B2') цвет обводки;
    • circleBorderWidth - (0.5) толщина линии обводки;
    • paintWeekends - (true) особый цвет для выходных;
    • weekendBg - ('#DF907C') цвет выходных кружков.

    Стилевое оформление для 'BezierGraph':

    • lineWidth - (0.5) толщина линии;
    • uLineColor - ('#d01b26') цвет линии "Уникальные посетители";
    • pvLineColor - ('#006a9f') цвет линии "Просмотры страниц";
    • circleRadius - (3) радиус окружности;
    • circleBg - ('#F5F5F5') заливка окружности;
    • circleBorderWidth - (0.5) толщина линии обводки;
    • paintWeekends - (true) особый цвет для выходных;
    • weekendBg - ('#5EA2C5') цвет выходных кружков.

    Примеры: Настройки отображения



    Лицензия: GNU GPL

    Скачать GitHub Поддержать

    комментарии:

    • Нет комментариев

    оставить комментарий: