Gallery | JavaScript Gantt Charting Library
Chart Gallery
Select a theme:DefaultDark BlueLight BlueDark EarthLight EarthDark GlamourLight GlamourDark ProvenceLight ProvenceDark TurquoiseLight TurquoiseCoffeeMonochromeMorningPastelSeaWines
Gantt Charts Gantt Charts, Activity-Oriented Charts, Human Resources, Planned-vs-Actual, Server Status List. Gantt General Features Main AnyGantt Features and Options. Gantt Working With Data Section demonstrates process of working with data while using AnyGantt component.
See also
AnyChart
AnyChart — JS charts
AnyChart is a lightweight and robust JavaScript charting library with great API, documentation, and enterprise-grade support.
AnyStock — JS stock charts
AnyStock is a lightweight JavaScript charting library that allows adding interactive high-performance financial or timeline based charts into any desktop, web and mobile project.AnyMap
AnyMap — HTML5 maps
AnyMap, our JavaScript HTML5 solution, is used by 1,000’s of customers worldwide in a multitude of applications, including Weather Forecasting, Crisis (Situational) Management, Energy Management, and Election Results Reporting to name a few.AnyGantt
AnyGantt — JS Gantt charts
AnyGantt is an advanced JavaScript based data-visualization solution, allowing everyone to utilize power of animation and ultimate interactivity.
AnyGantt is an ideal tool for
building complex and informative Gantt charts.
charts.свежие новости
- Загружается…
последние демо
- Загружается…
новые рекомендации и туториалы
- Загружается…
Наши менеджеры будут рады ответить на любые вопросы, связанные с нашей продукцией, лицензированием, покупкой и т.д.
- +1 (888) 845-1211 (США)
- +44 20 7193 9444 (Европа)
Документация 22.2: DevExtreme — Галерея JavaScript
Галерея — это компонент пользовательского интерфейса, который отображает коллекцию изображений в карусели. Компонент пользовательского интерфейса снабжен различными элементами управления навигацией, которые позволяют пользователю переключаться между изображениями.
Входит в состав: dx.web.js, dx.all.js
импортировать галерею из «devextreme/ui/gallery»
Посмотреть демо Читать руководства
См.
также- Настройка DevExtreme : Angular | Вью | Реагировать | jQuery | УгловойJS | Нокаут
- Настройка компонента пользовательского интерфейса : Angular | Вью | Реагировать | jQuery | УгловойJS | Нокаут
Объект, определяющий свойства конфигурации для компонента интерфейса Галерея.
| Имя | Описание |
|---|---|
| ключ доступа | Указывает сочетание клавиш, которое устанавливает фокус на компонент пользовательского интерфейса. |
| продолжительность анимации | |
| анимация включена | Указывает, следует ли анимировать изменение отображаемого элемента. |
| источник данных | Привязывает компонент пользовательского интерфейса к данным. |
| отключен | Указывает, реагирует ли компонент пользовательского интерфейса на действия пользователя. |
| атрибут элемента | Указывает глобальные атрибуты, которые должны быть присоединены к элементу-контейнеру компонента пользовательского интерфейса. |
| focusStateEnabled | Указывает, можно ли сфокусировать компонент пользовательского интерфейса с помощью навигации с помощью клавиатуры. |
| высота | Задает высоту компонента пользовательского интерфейса. |
| подсказка | Задает текст для подсказки, которая появляется, когда пользователь делает паузу в компоненте пользовательского интерфейса. |
| hoverStateEnabled | Указывает, изменяет ли компонент пользовательского интерфейса свое состояние, когда пользователь делает на нем паузу. |
| индикатор включен | Логическое значение, указывающее, разрешать ли пользователям переключаться между элементами, щелкая индикатор. |
| начальная ширина элемента | Задает ширину области, используемой для отображения одного изображения. |
Псевдоним для свойства itemTemplate, указанного в React. Принимает пользовательский компонент. Дополнительные сведения см. в разделе Использование пользовательского компонента. | |
| элементHoldTimeout | Период времени в миллисекундах до возникновения события onItemHold . |
| элементRender | Псевдоним для свойства itemTemplate, указанного в React. Принимает функцию рендеринга. |
| штук | Массив элементов, отображаемых компонентом пользовательского интерфейса. |
| шт.Шаблон | Задает пользовательский шаблон для элементов. |
| петля | Логическое значение, указывающее, следует ли прокручивать назад к первому элементу после прокрутки последнего элемента. |
| нет данныхтекст | Задает текст или HTML-разметку, отображаемую компонентом пользовательского интерфейса, если коллекция элементов пуста. |
| onContentReady | Функция, которая выполняется при отрисовке компонента пользовательского интерфейса и каждый раз при перерисовке компонента. |
| при утилизации | Функция, которая выполняется до удаления компонента пользовательского интерфейса. |
| при инициализации | Функция, используемая в платформах JavaScript для сохранения экземпляра компонента пользовательского интерфейса. |
| onItemClick | Функция, которая выполняется при нажатии или касании элемента коллекции. |
| onItemContextMenu | Функция, которая выполняется, когда элемент коллекции щелкается правой кнопкой мыши или нажимается. |
| onItemHold | Функция, которая выполняется, когда элемент коллекции удерживается в течение указанного периода. |
| onItemRendered | Функция, которая выполняется после визуализации элемента коллекции. |
| onOptionChanged | Функция, которая выполняется после изменения свойства компонента пользовательского интерфейса. |
| onSelectionChanged | Функция, которая выполняется при выборе элемента коллекции или отмене выбора. |
| rtlEnabled | Переключает компонент пользовательского интерфейса на представление справа налево. |
| выбранный индекс | Индекс текущего активного элемента галереи. |
| выбранныйЭлемент | Выбранный объект элемента. |
| ПоказатьИндикатор | Логическое значение, указывающее, следует ли отображать индикатор, указывающий на выбранный элемент галереи. |
| шоуNavButtons | Логическое значение, определяющее доступность кнопок навигации «Вперед» и «Назад». |
| Задержка слайд-шоу | Интервал времени в миллисекундах, по истечении которого галерея переключается на следующий элемент. |
| изображения растяжения | Указывает, растягивает ли компонент пользовательского интерфейса изображения, чтобы они соответствовали общей ширине галереи. |
| салфетка включена | Логическое значение, указывающее, разрешать ли пользователям переключаться между элементами смахиванием. |
| tabIndex | Указывает номер элемента, когда для навигации используется клавиша Tab. |
| видимый | Указывает, виден ли компонент пользовательского интерфейса. |
| ширина | Задает ширину компонента пользовательского интерфейса. |
| упаковка Вокруг | Указывает, отображать ли части предыдущего и следующего изображения по бокам текущего изображения. |
Обратитесь к разделу Использование функции рендеринга для получения дополнительной информации.
См. также
- Настройка компонента пользовательского интерфейса : Angular | Вью | Реагировать | jQuery | УгловойJS | Нокаут
В этом разделе описываются элементы, используемые для управления компонентом пользовательского интерфейса.
| Имя | Описание |
|---|---|
| начало обновления() | Предотвращает обновление компонента пользовательского интерфейса до тех пор, пока не будет вызван метод endUpdate(). |
| Параметры по умолчанию (правило) | Указывает зависящие от устройства свойства конфигурации по умолчанию для этого компонента. |
| распоряжаться() | Удаляет все ресурсы, выделенные экземпляру Gallery. |
| элемент() | Получает корневой элемент компонента пользовательского интерфейса. |
| endUpdate() | Обновляет компонент пользовательского интерфейса после вызова метода beginUpdate(). |
| фокус() | Устанавливает фокус на компонент пользовательского интерфейса. |
| получить источник данных () | Получает экземпляр DataSource. |
| getInstance (элемент) | Получает экземпляр компонента пользовательского интерфейса, найденный с помощью его узла DOM. |
| goToItem(itemIndex, анимация) | Показывает конкретное изображение. |
| экземпляр() | Получает экземпляр компонента пользовательского интерфейса. |
| следующий элемент (анимация) | Показывает следующее изображение. |
| выкл(имя события) | Отсоединяет все обработчики событий от одного события. |
| выкл (имя события, обработчик события) | Отсоединяет конкретный обработчик событий от одного события. |
| на (имя события, обработчик события) | Подписка на событие. |
| по(событиям) | Подписка на события. |
| вариант() | Получает все свойства компонента пользовательского интерфейса. |
| опция (имя_опции) | Получает значение одного свойства. |
| опция (optionName, optionValue) | Обновляет значение одного свойства. |
| опция(опции) | Обновляет значения нескольких свойств. |
| предыдущий элемент(анимация) | Показывает предыдущее изображение. |
| registerKeyHandler (ключ, обработчик) | Регистрирует обработчик, который будет выполняться, когда пользователь нажимает определенную клавишу. |
| перекрасить() | Перерисовывает компонент пользовательского интерфейса без перезагрузки данных. Вызовите его, чтобы обновить разметку компонента пользовательского интерфейса. |
| resetOption(optionName) | Сбрасывает свойство до его значения по умолчанию. |
Используйте его для доступа к другим методам компонента пользовательского интерфейса.
См. также
- Методы вызова : Angular | Вью | Реагировать | jQuery | УгловойJS | Нокаут
В этом разделе описываются события, запускаемые этим компонентом пользовательского интерфейса.
| Имя | Описание |
|---|---|
| контент готов | Возникает, когда содержимое компонента пользовательского интерфейса готово. |
| утилизация | Возникает перед удалением компонента пользовательского интерфейса. |
| инициализировано | Возникает только один раз после инициализации компонента пользовательского интерфейса. |
| пунктНажмите | Возникает при нажатии или касании элемента коллекции. |
| пунктContextMenu | Возникает при щелчке правой кнопкой мыши или нажатии элемента коллекции. |
| предметДерж | Возникает, когда элемент коллекции удерживается в течение указанного периода. |
| элементВизуализировано | Возникает после рендеринга элемента коллекции. |
| optionChanged | Возникает после изменения свойства компонента пользовательского интерфейса. |
| выбор изменен | Возникает при выборе элемента коллекции или отмене выбора. |
См. также
- Обработка событий : Angular | Вью | Реагировать | jQuery | УгловойJS | Нокаут
Была ли эта тема полезной?
Спасибо!
Не стесняйтесь делиться мыслями, связанными с демонстрацией, здесь.
Если у вас есть технические вопросы, создайте заявку в службу поддержки в Центре поддержки DevExpress.
x
Отправить отзыв
Спасибо!
Мы ценим ваши отзывы.
Галерея | Библиотека графиков JavaScript
Галерея диаграмм
Выберите тему:По умолчаниюТемно-синийГолубойТемно-ЗемляСветло-ЗемнойТемный ГламурСветлый ГламурТемный ПровансСветлый ПровансТемно-БирюзовыйСветло-БирюзовыйКофеМонохромныйУтроПастельМореВина
Панели мониторинга Многопанельные диаграммы, детализированные диаграммы и интерактивные информационные панели. Линейные графики Однорядная, многосерийная, линейная диаграмма с логарифмической осью, несколько осей Y, линейные маркеры.
Диаграммы областей
Односерийный, многосерийный, сложенный, 100% сложенный, комбинация «линия-площадь». Гистограммы
Односерийный, Многорядный, Кластерный, Сложенный, 100% сложенный, Перевернутые оси, Заполнение штриховкой. Столбчатые диаграммы
Односерийный, Многосерийный, Кластеризованный, Сложенный, 100% сложенный, Заполнение штриховкой, Перевернутые оси. Диаграммы пирогов и пончиков
Одинарная серия, вложенные как пирог, так и пончик, умные этикетки.
Точечные диаграммы
Односерийные, многосерийные точечные, маркерные, пузырьковые диаграммы рассеяния, логарифмическая ось, несколько осей Y, шкалы даты и времени. Квадрантные диаграммы
Квадрантная диаграмма, сравнение услуг бизнес-аналитики, матрица Эйзенхауэра, движение квадранта. Спарклайн-диаграммы
Графики спарклайнов, Линия, Столбец, Площадь, WinLoss, Таблица спарклайнов.
Комбинированные диаграммы
Stacked Columns — Lines, Lines — Columns, Line-Bar-Area и другие комбинации. Маркерные и пузырьковые диаграммы
Категории: односерийные, многосерийные, различные типы маркеров, аква-стиль, полупрозрачные. Трехмерные диаграммы с областями
Односерийный, многосерийный, сложенный, 100% сложенный, комбинация «линия-площадь». 3D гистограммы
Односерийный, многосерийный, сгруппированный, сложенный, 100% сложенный, перевернутые оси.
Трехмерные гистограммы
Односерийный, многосерийный, сгруппированный, сложенный, 100% сложенный, перевернутые оси. Трехмерные графики
Односерийный, многосерийный, комбинация столбцов и стержней. Диаграммы Парето
Диаграмма Парето в первую очередь предназначена для визуализации принципа 80/20, названного в честь Вильфредо Парето, что означает выделение наиболее важных точек данных среди группы факторов, которая обычно обширна.
Диаграмма Венна
Диаграмма Венна (или диаграмма множества, первичная диаграмма или логическая диаграмма) — это тип диаграммы, который показывает, как много общего у различных множеств. Круговые датчики
Круглые (угловые) калибры, полукруглые калибры, радиальные калибры. Цветовые диапазоны датчика, несколько осей, пользовательские маркеры и метки. Линейные датчики
Линейные датчики, светодиод, полоса, полоса диапазона, индикатор резервуара, датчик цилиндра, термометр, маркер, горизонтальный и вертикальный.
Радарные карты (Паутина)
Radar Charts (Spiderweb) — эффективный способ визуализации данных для сравнительного анализа. Каждая переменная представлена на осях. Все оси используют один масштаб и расположены радиально на одинаковом расстоянии друг от друга. Полярные карты
Полярная диаграмма — это распространенный вариант круговых диаграмм. Это полезно, когда взаимосвязь между точками данных проще всего отобразить с точки зрения угла и радиуса. Воронка – пирамидальные диаграммы
Воронкообразные и пирамидальные диаграммы со смарт-метками и расширенной интерактивностью.
Коробчатые диаграммы
Коробчатая диаграмма (коробчатая диаграмма или диаграмма с ячейками и усами) — это удобный способ графического изображения групп числовых данных через их квартили. Диаграммы тепловой карты
HeatMap — это графическое представление данных, в котором отдельные значения, содержащиеся в матрице, представлены в виде цветов. Диаграммы карты дерева
Карты дерева отображают иерархические (структурированные в виде дерева) данные в виде набора вложенных прямоугольников.
Пулевые диаграммы
Горизонтальные маркированные диаграммы, вертикальные маркированные диаграммы, маркированные диаграммы с отрицательными значениями, маркированные диаграммы с настройками стиля. Таблицы ошибок
Столбики погрешностей используются на диаграммах для обозначения ошибки или неопределенности в сообщаемом измерении. Мекко (Маримекко) и Мозаичные Карты
Диаграммы Mekko, Диаграммы Marimekko, Диаграммы Bar Mekko, Мозаичные диаграммы Диаграммы диапазонов
Односерийные, многосерийные, гистограммы, столбцы, области и комбинированные диаграммы.
Пользовательский чертеж
Расширенные образцы с пользовательскими функциями рисования: диаграмма Cherry, диаграмма Frog, конусная диаграмма, столбчатая диаграмма с закругленными краями. Облако тегов
Облако тегов, также называемое облаком слов или диаграммой взвешенного списка, представляет собой тип диаграммы, который помогает визуализировать текстовые данные и в основном служит для проведения частотного анализа слов по тегам, ключевым словам и т. д. Диаграммы водопада
Диаграмма водопада, также называемая диаграммой летающих кирпичей или диаграммой моста, лучше всего подходит для изучения кумулятивного эффекта положительных (или отрицательных) значений, добавляемых последовательно, одно за другим.
Графики солнечных лучей
Графики солнечных лучей Диаграмма Санки
Примеры диаграмм Санки Поверхностная диаграмма
Образцы поверхностных диаграмм Диаграмма дерева слов
Образцы диаграммы дерева слов Диаграмма временной шкалы
Образцы диаграмм временной шкалы Графическая диаграмма
Примеры графических диаграмм Таблица упаковки кругов
Образцы диаграмм упаковки кругов Календарь Диаграмма
Примеры календарных диаграмм Автоматическая окраска
Негативные/положительные цвета, восходящие/нисходящие цвета, цветовая шкала с пороговыми значениями для серий Общие характеристики
Общие возможности AnyChart.
Вертикальные диаграммы
Гистограммы, вертикальные линейные диаграммы, вертикальные диаграммы с областями, вертикальные линейчатые диаграммы, комбинация вертикальных диаграммСмотрите также
AnyChart
AnyChart — графики JS
AnyChart — это легкая и надежная библиотека диаграмм JavaScript с отличным API, документация и поддержка корпоративного уровня.AnyStock
AnyStock — биржевые графики JS
AnyStock — это облегченная библиотека графиков JavaScript, которая позволяет добавлять интерактивные высокопроизводительные финансовые или временные диаграммы на любом рабочем столе, в Интернете и на мобильных устройствах проект.