Прочитайте готовые ответы
Новые статьи
Поддержка Битрикс24
Регистрация и вход
Тарифы и оплата
Задачи и проекты
Чат и звонки
Группы
Календарь
CRM + Интернет-магазин
Диск
Сайты
База знаний
Интернет-магазин (beta)
Складской учет
Почта
CRM
CoPilot — AI в Битрикс24
Маркетинг
Сквозная аналитика
Центр продаж (beta)
CRM-аналитика (beta)
BI Конструктор
Автоматизация
CRM.Оплата и Доставка
Интеграция 1С и Битрикс24
Компания
Бизнес-процессы
Приложения
Контакт-центр
Моя страница
Телефония
Настройки
Мой тариф
Энтерпрайз
Enterprise HRM
Мобильное приложение
Десктоп-приложение
Общие вопросы
Готовые решения для бизнеса
Битрикс24 в коробке
1С-Битрикс24: Интернет-магазин + CRM
Изменения в статьях (архив)

Поддержка24

Как изменить оформление отчета в BI Конструкторе

Оформление отчета можно изменить с помощью CSS (Cascading Style Sheets) — каскадных таблиц стилей. CSS — это код, который позволяет визуально оформить дашборд: поменять цвет фона и элементов.

В статье расскажем, как использовать CSS и рассмотрим примеры оформления графиков в отчете.


Как перейти в редактор CSS

Чтобы настроить CSS в отчете, перейдите в раздел CRM > BI Конструктор > Мои отчеты. Выберите отчет и нажмите Редактировать.
Как редактировать отчеты

В конструкторе нажмите Редактировать дашборд > Три точки (...) > Редактировать CSS.

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

6.jpg
Добавленный код поменял цвет фона дашборда

Как использовать CSS для оформления отчета

CSS можно применить ко всему дашборду или к определенному графику. Например, чтобы поменять цвет фона у всех заголовков, используйте код:

 
 .header-title { 
color: #fcfafa;
background-color: #02b0f5
}
  • header-title — изменяет цвет текста и фона заголовка,
  • color: #fcfafa — задает цвет текста в заголовке,
  • background-color: #02b0f5 — устанавливает цвет фона заголовка.

Чтобы скрыть название определенного графика, надо знать его идентификатор. Выберите график и посмотрите код в браузере. Найдите в коде нужную строчку и скопируйте идентификатор:

  • data-test-chart-id="139" — идентификатор графика,
  • data-test-viz-type — тип графика,
  • data-test-chart-name — название графика.

В редакторе CSS введите код, он скроет название графика:

 
div[data-test-chart-id="139"] .header-title { 
visibility: hidden
}
  • div[data-test-chart-id="139"] .header-title — идентификатор указывает на определенный заголовок,
  • visibility: hidden — скрывает название заголовка.

Cписок основных CSS шаблонов для оформления отчета

Что делает Код CSS
Меняет фон дашборда body { color: #f7f9fa; background-color: #45d1ff }
Изменяет цвет компонентов дашборда .dashboard-component { color: #45d1ff }
Меняет цвет фона заголовка .header-title { color: #f7f9fa; background-color: #45d1ff }
Скрывает полосу прокрутки дашборда .dashboard-markdown .dashboard-component-chart-holder { overflow-y: hidden; overflow-x: hidden }
Скрывает название всех графиков .editable-title { display: none; justify-content: flex-end;!important }
Скрывает элементы управления div[data-test-chart-id="000"] .header-controls { visibility:hidden }
Скрывает название определенного графика div[data-test-chart-id="000"] .header-title { visibility: hidden }
Добавляет рамку для графика div[data-test-chart-id="000"] { border: thick double #45d1ff }

Коротко

  • Вы можете изменить оформление отчета с помощью CSS. Это код, который позволяет стилизовать дашборд, изменить цвет фона и элементов.
  • Чтобы настроить CSS в отчете, перейдите в раздел CRM > BI Конструктор > Мои отчеты. Выберите отчет и нажмите Редактировать.
  • В конструкторе нажмите Редактировать дашборд > Три точки (...) > Редактировать CSS. В окне редактора вставьте код и он сразу же применится к элементам дашборда.
  • Чтобы использовать некоторые CSS стили, надо знать идентификатор графика. Чтобы его узнать, выберите нужный график и посмотрите код в браузере.

Рекомендуем прочитать:
Спасибо, помогло!
Спасибо :)
Не помогло
Очень жаль :(
Помощь интегратора
Это не то, что я ищу
Написано очень сложно и непонятно
Есть устаревшая информация
Слишком коротко, мне не хватает информации
Мне не нравится, как это работает