Создайте столбчатую диаграмму на CSS
Создайте столбчатую диаграмму на CSS
Не каждая визуализация требует тяжёлой библиотеки графиков. Во многих дашбордах несколько стилизованных div-ов создают чёткую, быстро загружаемую столбчатую диаграмму, которая полностью под вашим контролем.
В этом уроке вы построите вертикальную столбчатую диаграмму из обычного HTML и Tailwind. Каждый столбец — это просто цветной div, высота которого соответствует его значению, а легенда связывает цвета с их смыслом.
Для аналитика эта техника — настоящая находка: вы можете вставить чистую диаграмму в любой отчёт без зависимостей и точно понимаете, как каждый пиксель соответствует вашим данным. Давайте нарисуем несколько столбцов.
Инструкции
Добавьте заголовок h1 «Quarterly Revenue», чтобы зрители понимали, что отображают столбцы.
Подсказка: Используйте: `<h1 class="text-3xl font-bold mb-2">Quarterly Revenue</h1>`.
Куда это писать?
<!-- Build your bar chart visualization here -->Пишите в строке 11 — под тем комментарием, после уже добавленного кода.
Создайте область построения диаграммы как flex-строку, в которой столбцы выравниваются по базовой линии с помощью items-end.
Добавьте цветные столбцы в виде div-ов с инлайн-стилем height, используя цвет bg-purple-500.
Добавьте легенду, объясняющую цвета, включая метку «Record quarter».
Ваш код
Опишите, что хотите создать на этом шаге, и я напишу код — затем нажмите «Применить», чтобы вставить его в редактор. Текущий шаг: Добавьте заголовок h1 «Quarterly Revenue», чтобы зрители понимали, что отображают столбцы.