CSS闪瞎眼六边形柱状图，炫酷大招全在这里！

前端

2023-04-01 10:32:57

六边形柱状图的视觉盛宴：用 CSS 打造立体 3D 效果

在数据可视化的世界里，柱状图无疑是最常用的图表类型之一。然而，如果仅仅满足于传统的矩形柱状图，那就太落伍了！今天，我们将探索一种更具视觉冲击力和实用性的图表形式——六边形柱状图，并教你如何使用 CSS 轻松实现它的 3D 立体效果。

认识六边形柱状图

六边形柱状图顾名思义，是以六边形为柱状体的一种图表。与传统的矩形柱状图相比，它具有以下优势：

更美观： 六边形的外形更具美感和视觉冲击力，能有效吸引观众的注意力。
更紧凑： 六边形可以紧密排列，在有限的空间内展示更多的数据。
更立体： 通过 CSS 的 3D 变换，我们可以让六边形柱状图呈现出逼真的立体效果，增强数据展示的沉浸感。

用 CSS 实现六边形柱状图

接下来，我们将一步一步讲解如何用 CSS 实现六边形柱状图的 3D 立体效果。

1. HTML 骨架

首先，我们需要创建一个 HTML 文档作为图表容器，并指定其宽高和位置。

<div id="chart" style="width: 600px; height: 400px; margin: 0 auto;"></div>

2. CSS 样式

接下来，我们用 CSS 为六边形柱状图定义样式。

#chart {
  perspective: 1000px;
}

.hexagon {
  width: 100px;
  height: 100px;
  background-color: #000;
  transform: rotate(30deg) skewX(-30deg);
  backface-visibility: hidden;
}

.hexagon:nth-child(even) {
  transform: rotate(30deg) skewX(30deg);
}

#chart 容器设置了 perspective 属性，为图表提供 3D 透视效果。
.hexagon 类定义了六边形柱状体的样式，包括宽高、背景颜色、3D 变换以及隐藏背面。
:nth-child(even) 选择器为偶数个六边形柱状体设置了相反的倾斜角度，营造出交错的效果。

3. JavaScript 生成数据

最后，我们需要使用 JavaScript 生成柱状图数据，并创建相应的六边形柱状体。

// 获取图表容器
const chart = document.getElementById('chart');

// 数据
const data = [
  { value: 100, color: '#FF0000' },
  { value: 200, color: '#00FF00' },
  { value: 300, color: '#0000FF' }
];

// 生成六边形柱状图
for (let i = 0; i < data.length; i++) {
  const hexagon = document.createElement('div');
  hexagon.classList.add('hexagon');
  hexagon.style.backgroundColor = data[i].color;
  hexagon.style.height = data[i].value + 'px';

  chart.appendChild(hexagon);
}