Инструкция по изменению стилей CSS

Print Инструкция по изменению стилей CSS
Download Инструкция по изменению стилей CSS as PDF
Download Инструкция по изменению стилей CSS as ODT
Download Инструкция по изменению стилей CSS as TXT

 

Вы можете изменять стиль компонентов отчета и их элементов, используя пользовательские CSS-правила.

Как открыть настройки CSS

  1. Перейдите в режим редактирования дашборда.
  2. В верхнем левом углу нажмите «Редактировать отчет».
  3. В открывшемся меню выберите CSS.

Определение селектора элемента

Чтобы определить селектор CSS элемента, воспользуйтесь инструментами разработчика браузера:

  1. Откройте страницу отчета и запустите инструменты разработчика (нажатием F12, Ctrl + Shift + I или через меню Настройки → Инструменты разработчика).
  2. В левом верхнем углу панели отладчика нажмите инструмент выбора элемента (пиктограмма со стрелкой).
  3. Наведите курсор на нужный элемент и кликните левой кнопкой мыши. В коде HTML подсветится соответствующий элемент.

Пример стилизации диаграмм

Допустим, мы хотим изменить цвет подписей шкалы диаграмм. После выбора элемента в коде HTML можно увидеть, что он имеет класс amcharts-axis-label и содержит тег <TSPAN>.

Чтобы изменить цвет всех подписей шкалы диаграмм, добавьте в CSS:

.amcharts-axis-label > TSPAN {
    fill: #FF0000;
}
Примечание — поскольку диаграмма — это SVG-изображение, используйте fill вместо color для изменения цвета текста.

Дополнительную информацию о тегах SVG можно найти здесь: MDN SVG Elements. 

Применение стилей к конкретной диаграмме

Если нужно изменить стиль только у определенной диаграммы, найдите ее контейнер в инструментах разработчика:

  1. Используйте инструмент выбора элемента.
  2. Найдите ID контейнера диаграммы (например, panel_8).

  3. Измените CSS-правило, добавив ID панели:
#panel_8 .amcharts-axis-label > TSPAN {
    fill: #FF0000;
}

Примечания:
1) Для обращения к ID используйте #, а к классу ..
2) Символ > указывает, что <TSPAN> является непосредственным потомком amcharts-axis-label.

Таким способом можно настраивать стили практически для любых элементов отчета. Дополнительную информацию о CSS можно найти в руководстве по основам CSS.