Перейти к контенту

Диаграмма Ганта на библиотеке D3

Это простая диаграмма Ганта, основанная на D3. D3.js — это библиотека JavaScript. D3 поможет вам воплотить данные в жизнь с помощью HTML, SVG и CSS. Акцент D3 на веб-стандартах дает вам все возможности современных браузеров, не привязывая к фреймворку, сочетая мощные компоненты визуализации.

Сами файлы можно скачать тут https://github.com/unmade/gantt-chart

 

Включите файлы из папки dist в ваш html, например:

 style sheet 

 js 

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

Чтобы создать пустой график:

var gantt = ganttChart();

По умолчанию диаграмма Ганта отображается в элементе с идентификатором gantt_chart:

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

Например:

gantt.autoresize(false)
     .enableTooltip(false)
     .enableZoom(false)
     .lanes(['first', 'second'])
     .margin(margin)

Чтобы создать диаграмму с параметрами:

var margin = {top: 0, right: 1, bottom: 2, left: 3},
    conf = {
        items: [],
        isAutoResize: false,
        isEnableDrag: false,
        isEnableTooltip: false,
        isEnableZoom: false,
        isShowXGrid: false,
        isShowYGrid: false,
        isShowLaneLabel: false,
        height: 240,
        lanes: [1, 2, 3],
        margin: margin,
        renderTo: 'body',
        width: 320,
    },
    gantt = ganttChart(conf);

Документация по API

GanttChart([conf])

Создает диаграмму и возвращает объект Ганта. Исходные параметры могут быть предоставлены через объект conf, который имеет следующие атрибуты:

itemsarrayarray of items to append to the chart.
isAutoResizebooleanenables/disables autoresizing.
isEnableDragbooleanenables/disables drag’n’drop.
isEnableItemResizebooleanenables/disables item’s resize.
isEnableTooltipbooleanenables/disables showing of items tooltip.
isShowXGridbooleanshows/hides X-axis grid.
isShowYGridbooleanshows/hides Y-axis grid.
isShowLaneLabelbooleanshow/hides lane’s label.
heightnumberset the chart’s height.
lanesarrayarray of lane’s labels.
marginobjectset the chart’s margin.
renderTostringelement to render chart to.
widthnumberset the chart’s width.

Объект item из массива items имеет следующие атрибуты:

АтрибутыТипОписание
idnumberunique item’s identificator.
lanenumbernumber of lane where item should appear.
startnumberdefine where item should start. number of milliseconds since 1 January 1970 00:00:00 UTC.
endnumberdefine where item should end. number of milliseconds since 1 January 1970 00:00:00 UTC.
tooltipstring or functionthe tip that should be shown on item’s click.
classstringitem’s css class.

Есть стандартные классы для предметов:

  • success — зеленый цвет;
  • danger — красный цвет;
  • info — синий цвет;
  • по умолчанию — серый цвет;
  • warning — оранжевый цвет;

Объект Margin имеет следующие необязательные атрибуты:

АтрибутыТипОписание
topnumbersets the top margin for the chart.
rightnumbersets the right margin for the chart.
bottomnumbersets the bottom margin for the chart.
leftnumbersets the left margin for the chart.

дорожки или lanes — это просто массив строк.

API

ganttChart() возвращает объект Ганта со следующим API:

AddItems(items)

Добавляет элементы к текущим элементам и перерисовывает диаграмму. Возвращает объект Ганта.

AUTORESIZE([boolean])

Если указано логическое значение, соответственно включает или отключает автоматическое изменение размера и возвращает объект Ганта. По умолчанию авторазмер включен. Если логическое значение не указано, возвращается, включено или нет автоматическое изменение размера в настоящий момент.

enableDrag([boolean])

Если указано логическое значение, включает или отключает элементы drag’n’drop и возвращает объект Ганта. По умолчанию drag’n’drop включен. Если логическое значение не указано, возвращает, включено ли перетаскивание в данный момент.

enableItemResize([boolean])

Если указано логическое значение, включает или отключает изменение размера элемента и возвращает объект Ганта. По умолчанию изменение размера элемента включено. Если логическое значение не указано, возвращается, включено ли изменение размера элемента в данный момент.

enableTooltip([boolean])

Если указано логическое значение, соответственно включает или отключает отображение всплывающей подсказки элемента и возвращает объект Ганта. По умолчанию всплывающие подсказки включены. Если логическое значение не указано, возвращает значение, показывающее, включена ли в данный момент всплывающая подсказка элемента.

enableZoom([boolean])

Если указано логическое значение, соответственно включает или отключает масштабирование и возвращает объект Ганта. По умолчанию масштабирование включено. Если логическое значение не указано, возвращается, включено ли в настоящее время масштабирование.

chart()

Ярлык для d3.select(‘svg.gantt-chart g.main’);

items([newItems])

Если указан newItems, устанавливает элементы, перерисовывает диаграмму и возвращает объект Ганта. Если newItems не указан, возвращает текущие элементы.

lanes([newLanes])

Если указан newLanes, устанавливает полосы и возвращает объект Ганта. Если newLanes не указан, возвращает текущие полосы.

Margin([newMargin])

Если задано newMargin, устанавливает маржу, изменяет размер диаграммы и возвращает объект Ганта. Если newMargin не указан, возвращает текущую маржу.

showlanelabel([булево])

Если указано логическое значение, соответственно отображает или скрывает метки дорожки и возвращает объект Ганта. По умолчанию отображается метка дорожки. Если логическое значение не указано, возвращает, показывает ли метка дорожки в данный момент.

showXGrid([булево])

Если указано логическое значение, соответственно показывает или скрывает сетку оси X и возвращает объект Ганта. По умолчанию отображается сетка оси X. Если логическое значение не указано, возвращает, показывает ли в данный момент сетка оси X.

showYGrid([булево])

Если указано логическое значение, соответственно показывает или скрывает сетку оси Y и возвращает объект Ганта. По умолчанию отображается сетка оси Y. Если логическое значение не указано, возвращает, показывает ли в данный момент сетка оси Y.

size([width[, height]])

Если указан width или height, устанавливает размер svg в указанное значение и возвращает объект Ганта. Если ширина, высота не указаны, возвращает текущий размер SVG.

  • SVG() — ярлык для d3.select(‘svg.gantt-chart’);
  • redraw() — перерисовать график;
  • renderTo() — возвращает атрибут renderTo;
  • resize() — изменить размер диаграммы;
  • xAxis() — возвращает ось X;
  • XSCALE() — возвращает шкалу Х;
  • yAxis() — возвращает ось Y;
  • yScale() — возвращает шкалу Y;
  • zoom() — возвращает масштабирование.

Это программное обеспечение предоставляется без изменений и без ограничений по лицензии MIT.

Оцени статью

Средняя оценка / 5. Количество голосов:

Спасибо, помогите другим - напишите комментарий, добавьте информации к статье.

Или поделись статьей

Видим, что вы не нашли ответ на свой вопрос.

Помогите улучшить статью.

 

Пока нет комментариев.

Добавить комментарий

Ваш e-mail не будет опубликован.

СайдбарКомментарии (0)