如何用CSS制作面积图

您可能知道一些使用纯CSS创建图表的方法。其中一些是在CSS技巧上讨论的，还有许多是在CodePen上可以找到的，但是我没有看到\"面积图\"的很多例子（想象一个填充了底部区域的折线图），特别是在HTML和CSS中。在本文中，我们将使用语义和可访问的HTML基础来实现这一点。让我们从HTML开始为了简化事情，我们将使用标记作为包装器，使用元素作为单个数据项。您可以根据需要在项目中使用任何其他HTML标记。 CSS can\"t retrieve the inner HTML text, that is why we will be using CSS custom properties to pass data to our CSS. Each data item will have a --start和一个--end自定义属性。 Here\"s what we need to consider… There are several design principles we ought to consider before moving into styling: - Units data: We will be using unit-less data in our HTML (i.e. no px、em、rem、%或任何其他单位）。--start和--end自定义属性将是介于0和1之间的数字。 - 列宽：我们不会为每个元素设置固定的width。我们也不会使用%，因为我们不知道有多少物品。每个列宽将基于主包装宽度除以数据项总数。在我们的例子中，元素的宽度除以元素的数目。 - 可访问性：每个中的值是可选的，只需要--start和--end自定义属性。不过，最好还是包含一些文本或值，以便屏幕阅读器和其他辅助技术来描述内容。现在，让我们开始设计样式吧！让我们先从总体布局样式开始。图表包装器元素是一个灵活的容器，在一行中显示项目，拉伸每个子元素以填充整个区域。 .area-chart {/* Reset */margin: 0;padding: 0;border: 0;/* Dimensions */width: 100%;max-width: var(--chart-width, 100%);height: var(--chart-height, 300px);/* Layout */display: flex;justify-content: stretch;align-items: stretch;flex-direction: row;} 如果区域图表包装器是一个列表，我们应该删除列表样式以给我们更大的样式设置灵活性。 ul.area-chart,ol.area-chart {list-style: none;} 此代码为整个图表中的所有列设置样式。使用条形图很简单：我们对每列使用background-color和height。使用区域字符ts我们将使用clip-path属性来设置应该显示的区域。首先我们设置每个列： .area-chart > * {/* Even size items */flex-grow: 1;flex-shrink: 1;flex-basis: 0;/* Color */background: var(--color, rgba(240, 50, 50, .75));} 要创建一个覆盖整个区域的矩形，我们将使用clip-path属性并使用其包含这个地区。因为多边形覆盖了所有的东西： .area-chart > * {clip-path: polygon(0% 0%,/* top left */100% 0%,/* top right */100% 100%, /* bottom right */0% 100%/* bottom left */);} 现在是最好的部分！为了只显示列的一部分，我们将其剪裁成类似面积图的效果。为了显示我们想要的区域，我们使用--start和--end在clip-path多边形内的自定义属性： .area-chart > * {clip-path: polygon(0% calc(100% * (1 - var(--start))),100% calc(100% * (1 - var(--end))),100% 100%,0% 100%);} 说真的，这一位CSS完成了所有的工作。下面是我们得到的：CodePen Embed Fallback使用多个数据集现在我们了解了基础知识，让我们创建一个包含多个数据集的面积图。面积图通常测量多组数据，其效果是对数据进行分层比较。这种图需要几个子元素，因此，我们将用. Tables are accessible and search engine friendly. And if the stylesheet doesn\"t load for some reason, all the data is still visible in the markup. Again, we will use the --start和--end自定义属性替换方法，这些属性的数字介于0和1之间。 So, first we will style the general layout for the wrapping element, our table, which we\"ve given an .area-chart类： .area-chart {/* Reset */margin: 0;padding: 0;border: 0;/* Dimensions */width: 100%;max-width: var(--chart-width, 600px);height: var(--chart-height, 300px);} 接下来，我们将元素作为一个灵活的容器，将项显示成一行，大小均匀： .area-chart tbody {width: 100%;height: var(--chart-height, 300px);/* Layout */display: flex;justify-content: stretch;align-items: stretch;flex-direction: row;}.area-chart tr {/* Even size items */flex-grow: 1;flex-shrink: 1;flex-basis: 0;} 现在我们需要使元素相互覆盖，一个元素在另一个元素之上，这样我们就得到了分层效果。每个都覆盖了包含它的元素的整个区域。 .area-chart tr {position: relative;}.area-chart td {position: absolute;top: 0;right: 0;bottom: 0;left: 0;} 让我们使用clip-path: polygon()的魔法吧！我们只显示--start和--end自定义属性之间的区域，这些属性的值也在0和1之间： .area-chart td {clip-path: polygon(0% calc(100% * (1 - var(--start))),100% calc(100% * (1 - var(--end))),100% 100%,0% 100%);} 现在让我们为每个属性添加颜色： .area-chart td {background: var(--color);}.area-chart td:nth-of-type(1) {--color: rgba(240, 50, 50, 0.75);}.area-chart td:nth-of-type(2) {--color: rgba(255, 180, 50, 0.75);}.area-chart td:nth-of-type(3) {--color: rgba(255, 220, 90, 0.75);} 使用不透明度的颜色以获得更好的效果很重要，这就是为什么我们使用rgba()值的原因。你可以在这里使用hsla()，如果你是这样滚动的话。就像这样：CodePen嵌入回退包装不管我们向图表中添加多少HTML元素，基于flex的布局确保所有项目的大小相等。这样，我们只需要设置包装图元素的宽度，项目将根据响应布局进行相应调整。我们介绍了一种使用纯CSS创建面积图的技术。对于高级用例，您可以查看我新的开源数据可视化框架ChartsCSS.org网站。参见面积图

如何用CSS制作面积图

admin_action_{$_REQUEST[‘action’]}

admin_footer-{$GLOBALS[‘hook_suffix’]}

customize_save_{$this->id_data[‘base’]}

customize_value_{$this->id_data[‘base’]}

get_comment_author_url

network_admin_edit_{$_GET[‘action’]}

network_sites_updated_message_{$_GET[‘updated’]}

pre_wp_is_site_initialized

WordPress 的SEO 教学：如何在网站中加入关键字（Meta Keywords）与Meta 描述（Meta Description）？

谷歌的SEO是什么