用 CSS 构建柱状图
入门~13 分钟0/4 步骤
用 CSS 构建柱状图
并不是每个可视化都需要笨重的图表库。对很多仪表盘来说，几个带样式的 div 就能做出一个清爽、加载飞快、完全由你掌控的柱状图。
在本课中，你将用纯 HTML 和 Tailwind 构建一个垂直柱状图。每根柱子只是一个带颜色的 div，其高度对应数值大小，再用一个图例把颜色和含义联系起来。
对分析师来说，这个技巧价值千金：你可以在任何报告里放入一个不依赖任何库的干净图表，而且清楚地知道每个像素如何对应你的数据。让我们开始画柱子吧。
操作说明
1
添加图表标题 h1“季度营收”，让读者知道这些柱子代表什么。
提示： 使用：`<h1 class="text-3xl font-bold mb-2">季度营收</h1>`。
这段代码写在哪里？
<!-- 在这里构建你的柱状图可视化 -->写在第 11 行——在那条注释下方，接在你已经写好的代码后面。
2
把图表绘图区做成一个 flex 行，用 items-end 让所有柱子落在同一条基线上。
3
用带内联 height 样式的 div 添加彩色柱子，使用 bg-purple-500 颜色。
4
添加一个解释颜色含义的图例，其中包含“创纪录季度”这个标签。
你的代码
html
1
2
3
4
5
6
7
8
9
10
11
12
13
用 ViBot 来 Vibe0 / 12 条免费消息
描述你想为这一步构建的内容，我来编写代码——然后点击「应用」把它放进你的编辑器。 本步骤：添加图表标题 h1“季度营收”，让读者知道这些柱子代表什么。
实时预览
实时预览