Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

Возможности

  • Полная локализация
  • Простая конфигурация
  • Размер (5KB в gzip)
  • Работает во всех современных браузерах, включая IE11+

Установка

Библиотеку можно загрузить с Github:

git clone http://github.com/oguzhanoya/jquery-gantt.git

Конфигурация

Опция Значение Описание
data [] Источник данных
dataURL '' url источника данных
startDate new Date() Начальная дата
endDate new Date() Конечная дата
cellWidth 20 Ширина ячейки
cellHeight 38 Высота ячейки
stickyHeader false Закреплённый хедер
mouseScroll false Прокрутка мышью
mouseScrollpx 120 Скорость прокрутки мыши
lazyLoad false Отложенная загрузка
autoHide false Автоматическое скрытие завершённых событий

Локализация

Стандартная конфигурация в формате l10n будет выглядеть так:

$.fn.gantt.l10n['en'] = {
    monthNames: [ "January","February","March","April","May","June","July","August","September","October","November","December" ],
    monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
    dayNames: [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ],
    dayNamesShort: [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ],
    dayNamesMin: [ "Su","Mo","Tu","We","Th","Fr","Sa" ]
};

Необходимо перечислить наименование 12 месяцев и 7 дней недели.

Конфигурация исходных данных

[{
    "title": "Example",
    "startdate": "2016-06-10",
    "enddate": "2016-06-12",
    "url": "http://www.example.com/",
    "type": "Cruise",
    "minNight": "2",
    "price": {
        "original": {
            "price": 798,
            "priceType": "€"
        },
        "converted": {
            "price": 878,
            "priceType": "$"
        }
    },
    "tooltipData": {
        "title": "Example Tour",
        "image": "http://example.com/image.jpg",
        "desc": [
            "Lorem ipsum dolor sit amet",
            "consectetur adipisicing elit",
            "Explicabo repellat temporibus "
        ],
        "dates": {
            "begin": "10 June 2016 Friday",
            "end": "12 June 2016 Sunday"
        }
    }
}]

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://github.com/oguzhanoya/jquery-gantt
Перевел: Станислав Протасевич
Урок создан: 30 Мая 2017
Просмотров: 18661
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^