Настройки для Bar Chart

Представление данных

  • value (template) - темплейт для графического представления элемента данных;
  • data / url (string) - источник данных;
  • label (template) - текстовый заголовок для каждого столбца;

Подробнее о настройке шкалы

Внешний вид и расположение

  • barWidth (number) - ширина каждого столбца в пикселях;
  • radius (boolean) - если true, закругляет верхние углы столбцов;
  • gradient (boolean, string, function) - градиент для столбцов;
  • padding (object) - отступ диаграммы и родительского контейнера {top:50, left:0, right:30, left:40};
  • color (template, hex code, function) - цветовые эффекты для столбцов;
  • alpha (число между 0 и 1) - прозрачность столбцов;
  • border (boolean) - если false, убирает черную границу по контуру столбцов. По умолчанию true.

Подробнее о задании цветов в Chart

Типы Bar Chart

Таблица 1 Типы Bar Chart
Тип Вертикальные столбцы Горизонтальные столбцы
Данные одного объекта bar barH
Данные нескольких объектов stackedBar stackedBarH

Диаграммы StackedBar и stackedBarH могут отображать данные сразу нескольких объектов данных (так называемые серии диаграмм), например графическое представление продаж трех компаний.

Серии Bar Chart

Серии можно применить ко всем столбчатым диаграммам, тем не менее каждый тип имеет свои особенности. Столбцы с предыдущими значениями располагаются рядом со следующими, что удобно для сравнения показателей. Кроме того, легенда активна и позволяет по клику скрывать и показывать нужные столбцы.

Таблица 2 Представление нескольких свойств данных в Bar Chart
Использование серий
'stackedBar'/'stackedbarH'

Related sample:  Bar Chart: Several Graphs in One Chart

Правила задания серий рассмотрены отдельно.

Наборы настроек для Bar Chart

Библиотека предлагает 3 готовых набора настроек (пресетов) для гистограмм. Чтобы установить один из пресетов, задайте нужное значение в свойстве preset:

webix.ui({
    view: "chart",
    type: "bar",
    preset: "stick",
    ...
};

Related sample:  Bar Chart: Style Presets


Таблица 3 Пресеты для Bar Сhart
preset:"column"
preset:"stick"
preset:"alpha"

Назад к типам диаграмм

Наверх