如何使用CSS制作区域图表

仅使用CSS创建图表似乎很不寻常，但这是完全可行的。尽管存在许多CSS图表示例，但区域图（带有填充区域的线路图）较不常见。本文展示了使用HTML和CSS构建区域图，优先考虑语义和可访问的HTML。

HTML结构

为简单起见，我们将使用<li>a内的元素<ul></ul>对于数据点。但是，可以根据项目的需求使用其他HTML结构。我们将利用CSS自定义属性将数据传递到我们的样式表，分配--start和--end属性<li>元素。

• 40％
• 80％
• 60％
• 100％
• 30％

每个文字内容<li>是可选的； --start和--end是至关重要的数据点。但是，包括文本可以改善屏幕读取器的可访问性。

设计注意事项

在造型之前，几个设计原则很重要：

<li> 无单位数据：使用无单位的数字（0到1）进行--start和--end在HTML中。 <li> 动态色谱柱宽度：避免固定宽度<li>元素。列宽度将根据容器的宽度除以数据点的数量动态计算。 <li> 可访问性： while --start and --end是必不可少的，包括每个内部的描述性文本<li>增强可访问性。

CSS样式

让我们从整体布局开始：

 .area-chart {
  保证金：0;
  填充：0;
  边界：0;
  宽度：100％；
  最大宽度：var（ - 图表宽度，100％）; / *可自定义的宽度 */
  高度：var（ - 图表高度，300px）; / *可自定义的高度 */
  显示：Flex;
  正当：拉伸；
  准项目：伸展；
  弹性方向：行；
}

ul.area-chart {
  列表风格：无；
}

这设置了一个灵活的容器。接下来，样式单个列：

 .area-chart> li {
  Flex Grow：1;
  屈曲：1;
  弹性基础：0;
  背景：var（ - 颜色，rgba（240、50、50，.75））; / *默认颜色 */
  剪辑路径：多边形（
    0％calc（100％ *（1-var（ -  start））），
    100％计算（100％ *（1-var（-end））），
    100％100％，
    0％100％
  ）；
}

clip-path属性是关键。它使用多边形来定义可见区域，并根据--start和--end进行动态调整。

多个数据集

对于多个数据集，表提供更好的结构和可访问性：

40％	80％
60％	100％

使用tbody和td选择器而不是ul和li ，表的CSS将相应地调整，但是Core clip-path逻辑保持不变。请记住，将td元素设置为position: absolute可以正确分层。

结论

这种方法使用纯CSS创建响应区域图表。有关更高级的功能，请考虑探索专用的数据可视化框架。

以上是如何使用CSS制作区域图表的详细内容。更多信息请关注PHP中文网其他相关文章！