Column-Grid

Шаблон расположение Column-Grid позволяет размещать графики в виде колонок. Каждая колонка может содержать произвольное количество строк.

Сolumn-grid

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

Объявление шаблона column-grid

{
  "data": { ... },
  "view": {
    "canvas": {
      "items": [
        {
          "type": "column-grid",       // Объявление шаблона column-grid
          "columnsSpace": "5 px",      // Горизонтальный отступ между столбцами
          "columns": [...]             // Объявление столбцов
        }
      ]
    }
  }
}
Название Тип Значение поумолчанию Описание
columnSpace number 0 px Горизонтальный отступ между столбцами.
columns Array<object> Описание столбцов.

Объявление столбцов

{
  ...,
  "columns": [
    {
      "width": "33 %",                 // Ширина столбца относительно контейнера. Может задаваться в %, px 
      "rowsSpace": "5 px",             // Вертикальный отступ между строками в пределах столбца
      "rows": [...]                    // Объявление строк
    }
  ]
}
Название Тип Значение поумолчанию Описание
width string 100 % Ширина столбца относительно контейнера. Может задаваться в %, px.
rowsSpace number 0 px Вертикальный отступ между строками.
rows Array<object> Описание строк.

Объявление строк

{
  ...,
  "rows": [
    {
      "height": "50%",                 // Высота строки относительно контейнера. Может задаваться в %, px
      "item": {                        // Объявление графика
        "type": "graph", 
        ... 
      }
    }
  ]
}
Название Тип Значение поумолчанию Описание
height string 100 % Высота строки относительно контейнера. Может задаваться в %, px.
item object Определение графика.

Пример

Код примера

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

Предыдущая
Следующая