Grid

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

Grid

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

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

{
  "data": { ... },
  "view": {
    "canvas": {
      "items": [
        {
          "type": "grid",              // Объявление шаблона grid
          "rowsSpace": "5 px",         // Вертикальный отступ между строками
          "rows": [...]                // Объявление строк 
        }
      ]
    }
  }
}
Название Тип Значение поумолчанию Описание
rowsSpace string 0px Вертикальный отступ между строками.
rows Array<object> Описание строк.

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

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

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

{
  ...,
  "columns": [
    {
      "width": "50%",                  // Ширина столбца. Может задаваться в %, px
      "item": {                        // Объявление графика
        "type": "chart", 
        "data": {...} 
      }
    }
  ]
}
Название Тип Значение поумолчанию Описание
width string 100 % Ширина столбца. Может задаваться в %, px.
item object Определение графика.

Пример

Код примера

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

Следующая