Адаптивные графики на HTML и CSS
Матиас Шафер делится тем, как из бар-чартов (диаграммы с горизонтальными полосками, их ещё горизонтальными гистограммами называют) на SVG получилось сделать адаптивный вариант на HTML и CSS. Причём это хороший пример для полезного применения многострадальных сабгридов.
- Гриды позволяют размещать подписи, значения и сами полоски как угодно. Хоть влево, хоть вправо, хоть одно под другим.
- Адаптивность реализуется довольно просто, достаточно переписать пару свойств по разметке грида.
- Доступность из коробки, потому что по сути график — это список значений. Как раз для списка сабгриды хорошо и подошли.
- При желании любое значение можно особым образом выделить, так как это обычный CSS. Добавил класс на ряд — и вот уже очень важное значение на графике выглядит тоже очень важно.
- В гридах можно накладывать одни элементы поверх других, поэтому получилось сделать шкалу с промежуточными значениями.
- Я бы добавил чуть больше математики на
- В примере используются логические свойства, так что сразу можно использовать такие графики и для языков, которые работают справа-налево.
- При желании такой же подход можно применить и к колоночным диаграммам. Или даже превращать их в горизонтальные гистограммы, когда экран маленький, а колонок много.
Хороший пример для вдохновения, чтобы с чего-то начать и доработать под себя.
https://9elements.com/blog/responsive-bar-charts-in-html-and-css/
Матиас Шафер делится тем, как из бар-чартов (диаграммы с горизонтальными полосками, их ещё горизонтальными гистограммами называют) на SVG получилось сделать адаптивный вариант на HTML и CSS. Причём это хороший пример для полезного применения многострадальных сабгридов.
- Гриды позволяют размещать подписи, значения и сами полоски как угодно. Хоть влево, хоть вправо, хоть одно под другим.
- Адаптивность реализуется довольно просто, достаточно переписать пару свойств по разметке грида.
- Доступность из коробки, потому что по сути график — это список значений. Как раз для списка сабгриды хорошо и подошли.
- При желании любое значение можно особым образом выделить, так как это обычный CSS. Добавил класс на ряд — и вот уже очень важное значение на графике выглядит тоже очень важно.
- В гридах можно накладывать одни элементы поверх других, поэтому получилось сделать шкалу с промежуточными значениями.
- Я бы добавил чуть больше математики на
calc и CSS-переменных, чтобы ещё меньше писать лишнего в самом HTML. Прям просится в демках поправить.- В примере используются логические свойства, так что сразу можно использовать такие графики и для языков, которые работают справа-налево.
- При желании такой же подход можно применить и к колоночным диаграммам. Или даже превращать их в горизонтальные гистограммы, когда экран маленький, а колонок много.
Хороший пример для вдохновения, чтобы с чего-то начать и доработать под себя.
https://9elements.com/blog/responsive-bar-charts-in-html-and-css/