用CSS网格制作条形图

编辑器注意:这篇文章只是一个尝试,目的是使用新的CSS属性,因此如果没有对可访问性的重大改进,就不应该使用下面的代码。 我对图表有一种特殊的执迷,出于某种原因,我想找出使用CSS制作图表的所有方法。我想这有两个原因。首先,我认为有趣的是,在网络上有一百万种不同的方式来设计图表和数据。其次,它非常适合学习新的和不熟悉的技术。在本例中:CSS网格!我对图表的痴迷让我思考:你如何用CSS网格制作一个简单的\"响应条形图\",就像这样: !快速简便的方法 由于网格乍一看可能会让人困惑和怪异,让我们先来关注一下制作一个真正的黑客原型。开始时,我们需要为图表编写标记: Each of those bar-类将构成图表中的一个完整栏,尽管这看起来很恶心,但现在我们不会太担心语义或标记网格或数据。稍后再谈——让我们专注于CSS,这样我们可以了解更多关于网格的信息。 好的,这样我们现在就可以获得样式了!在我们的图表中,我们需要12个条,它们之间有5px的间隙,这样我们就可以用相关的CSS网格属性设置父类.chart: .chart {display: grid;grid-template-columns: repeat(12, 1fr);grid-column-gap: 5px;} 如果您对网格非常熟悉,那么这是非常直接的,但是它有效地描述了:\"我想要12个列,每个子元素具有相等的宽度(1分数),间距为5px\"。 但是现在,这里有一个狡猾的部分:使用Grid,我们可以使用grid-template-rows属性来设置每个图表条的高度: .chart {display: grid;grid-template-columns: repeat(12, 1fr);grid-template-rows: repeat(100, 1fr);grid-column-gap: 5px;} 我们可以使用这个整洁的新属性在网格中生成100行,这样我们就可以将每个条设置为该高度的一个百分比,这将使我们的计算变得简单。同样,我们在使用repeat()函数,这样我们的每一行构成相同的高度。 在我详细解释之前,让我们给图表一个最大宽度,并用flex将它设置到屏幕的中心: * { box-sizing: border-box; }html, body {margin: 0;background-color: #eee;display: flex;justify-content: center;}.chart {height: 100vh;width: 70vw;/* other chart styles go here */} 此时,我们的图表仍然是空的,因为我们还没有告诉子元素占用任何空间网格中的空间。所以让我们来解决这个问题!我们将选择每个包含bar的类,并使用grid-row-start和grid-row-end属性来填充网格中的垂直空间,因此最终我们将更改其中一个属性来定义每个条的自定义高度: So if you\"re bewildered by those grid-row属性,这样就可以了!我们告诉我们的每一个小节从网格的最顶端开始(1),然后在最底端结束(101)。但是当我们只告诉网格包含100行时,为什么要使用101作为该属性的值呢?在我们继续之前,让我们先探讨一下这个问题!网格线 在编写本演示之前,我从未考虑过网格的一个特殊之处是网格线的概念,这对于理解这个新的布局工具非常重要。下面是如何在四列四行网格中绘制网格线的示例: 这个新示例包含四列四行,样式如下: .grid {grid-gap: 5px;grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(4, 1fr);}.special-col {grid-row: 2 / 4;background-color: #222;} grid-row是grid-row-start和grid-row-end的简写属性,第一个值是我们希望元素开始的位置在网格上以及我们希望它结束的最终值。但是!这意味着我们希望这里的特殊元素开始于网格线2,结束于网格线4–而不是第4行的末尾。如果我们想让这个黑盒子填满所有4行,那么我们需要它在第5行或第15行结束,如果你仔细想想,这是非常有意义的。 换句话说,我们不应该认为元素在网格中占据整行或整列,而应该只在这些网格线之间跨越。我花了一段时间才从概念上理解并习惯了詹·西蒙斯(Jen Simmons)最近关于这个问题的教程。 无论如何!回到演示 这就是为什么在我们的图表演示中,我们将所有列结束在第101行而不是第100行–因为我们希望它填满最后一行(100),所以我们必须将它发送到特定的网格线(101)。 现在,因为我们的.chart类使用vw/vh单位,我们也有一个很好的反应图表,而不必做太多的工作。如果你调整下面的图的大小,你会发现它很好地压缩或拉伸,总是占据整个视口: 从这里开始,我们可以开始设计每个条形图的样式,为它们提供正确的数据,我们有很多不同的方法可以做到这一点。让我们看一看其中的一个。首先,让我们想象一下,我们希望图表中的第一个条形图.bar-1是50/100或图表高度的一半。我们可以写以下ng CSS和bedonewithit: ***18***是让条从\"50\"开始,到\"101\"结束,但这并不是我们真正想要的。这里有一个例子:假设这个假设的例子中的数据发生了变化,我们需要它现在是20/100。让我们返回并更改值: ***19*** 这不对!我们希望条形图不是从30开始的,而是图表高度的30%。我们可以把我们的价值改成***20***或者我们可以用***21***财产代替,对吗?嗯,不完全是这样: ***22*** 吧台的尺寸是正确的,但是位置是错误的,因为我们告诉吧台在30/100处结束。那么,我们如何解决这个问题,使我们的代码非常容易阅读呢?好吧,一种方法是利用Sass来为我们做计算。理想情况下,我们想写下这样的东西: ***23*** 无论我们在这个混合中输入什么值,我们总是希望得到网格上图表的正确高度和位置。为这个mixin提供动力的数学实际上非常简单:我们所要做的就是取我们的值,从总行数中扣除它,然后将它附加到***24***属性,比如: ***25*** 所以Sass mixin生成的最终值是***26***,但是我们的代码非常清晰!我们甚至不必查看我们的网格就可以知道将要发生什么–图表项将位于网格的底部,并且值总是正确的。但是,我们如何创建所有这些网格类呢?我认为一个巧妙的方法就是让Sass自动为我们生成所有这些类。只需对代码稍作修改,我们就可以这样做: ***27*** 这将迭代图表中的所有行,并为该行大小生成一个单独的类。所以现在我们可以像这样更新我们的标记: <;div> !我们不必手动为每个元素编写单独的类,只需更改标记即可轻松地更新图表。这个Sass循环会抛出很多未使用的类,但是有很多工具可以去除这些类!使用CSS网格构建的响应图表。然而,我们可以做很多事情来整理这些代码。我们应该做的第一件事可能是确保我们使用语义标记,并使用一个工具来删除所有那些被Sass循环抛出的类。我们还可以深入研究这个图表是如何在mobile上呈现的,并思考应该如何标记每个列和图表轴。但就目前而言,这只是一个开始。本文的TL;DR:CSS网格可以用于各种各样的事情,而不仅仅是设置文本和图像相邻。它为我们开辟了一个全新的网页设计分支

admin_action_{$_REQUEST[‘action’]}

do_action( "admin_action_{$_REQUEST[‘action’]}" )动作钩子::在发送“Action”请求变量时激发。Action Hook: Fires when an ‘action’ request variable is sent.目录锚点:#说明#源码说明(Description)钩子名称的动态部分$_REQUEST['action']引用从GET或POST请求派生的操作。源码(Source)更新版本源码位置使用被使用2.6.0 wp-admin/admin.php:...

日期:2020-09-02 17:44:16 浏览:1127

admin_footer-{$GLOBALS[‘hook_suffix’]}

do_action( "admin_footer-{$GLOBALS[‘hook_suffix’]}", string $hook_suffix )操作挂钩:在默认页脚脚本之后打印脚本或数据。Action Hook: Print scripts or data after the default footer scripts.目录锚点:#说明#参数#源码说明(Description)钩子名的动态部分,$GLOBALS['hook_suffix']引用当前页的全局钩子后缀。参数(Parameters)参数类...

日期:2020-09-02 17:44:20 浏览:1032

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

do_action( "customize_save_{$this-&gt;id_data[‘base’]}", WP_Customize_Setting $this )动作钩子::在调用WP_Customize_Setting::save()方法时激发。Action Hook: Fires when the WP_Customize_Setting::save() method is called.目录锚点:#说明#参数#源码说明(Description)钩子名称的动态部分,$this->id_data...

日期:2020-08-15 15:47:24 浏览:775

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

apply_filters( "customize_value_{$this-&gt;id_data[‘base’]}", mixed $default )过滤器::过滤未作为主题模式或选项处理的自定义设置值。Filter Hook: Filter a Customize setting value not handled as a theme_mod or option.目录锚点:#说明#参数#源码说明(Description)钩子名称的动态部分,$this->id_date['base'],指的是设置...

日期:2020-08-15 15:47:24 浏览:866

get_comment_author_url

过滤钩子:过滤评论作者的URL。Filter Hook: Filters the comment author’s URL.目录锚点:#源码源码(Source)更新版本源码位置使用被使用 wp-includes/comment-template.php:32610...

日期:2020-08-10 23:06:14 浏览:903

network_admin_edit_{$_GET[‘action’]}

do_action( "network_admin_edit_{$_GET[‘action’]}" )操作挂钩:启动请求的处理程序操作。Action Hook: Fires the requested handler action.目录锚点:#说明#源码说明(Description)钩子名称的动态部分$u GET['action']引用请求的操作的名称。源码(Source)更新版本源码位置使用被使用3.1.0 wp-admin/network/edit.php:3600...

日期:2020-08-02 09:56:09 浏览:848

network_sites_updated_message_{$_GET[‘updated’]}

apply_filters( "network_sites_updated_message_{$_GET[‘updated’]}", string $msg )筛选器挂钩:在网络管理中筛选特定的非默认站点更新消息。Filter Hook: Filters a specific, non-default site-updated message in the Network admin.目录锚点:#说明#参数#源码说明(Description)钩子名称的动态部分$_GET['updated']引用了非默认的...

日期:2020-08-02 09:56:03 浏览:834

pre_wp_is_site_initialized

过滤器::过滤在访问数据库之前是否初始化站点的检查。Filter Hook: Filters the check for whether a site is initialized before the database is accessed.目录锚点:#源码源码(Source)更新版本源码位置使用被使用 wp-includes/ms-site.php:93910...

日期:2020-07-29 10:15:38 浏览:809

WordPress 的SEO 教学:如何在网站中加入关键字(Meta Keywords)与Meta 描述(Meta Description)?

你想在WordPress 中添加关键字和meta 描述吗?关键字和meta 描述使你能够提高网站的SEO。在本文中,我们将向你展示如何在WordPress 中正确添加关键字和meta 描述。为什么要在WordPress 中添加关键字和Meta 描述?关键字和说明让搜寻引擎更了解您的帖子和页面的内容。关键词是人们寻找您发布的内容时,可能会搜索的重要词语或片语。而Meta Description则是对你的页面和文章的简要描述。如果你想要了解更多关于中继标签的资讯,可以参考Google的说明。Meta 关键字和描...

日期:2020-10-03 21:18:25 浏览:1620

谷歌的SEO是什么

SEO (Search Engine Optimization)中文是搜寻引擎最佳化,意思近于「关键字自然排序」、「网站排名优化」。简言之,SEO是以搜索引擎(如Google、Bing)为曝光媒体的行销手法。例如搜寻「wordpress教学」,会看到本站的「WordPress教学:12个课程…」排行Google第一:关键字:wordpress教学、wordpress课程…若搜寻「网站架设」,则会看到另一个网页排名第1:关键字:网站架设、架站…以上两个网页,每月从搜寻引擎导入自然流量,达2万4千:每月「有机搜...

日期:2020-10-30 17:23:57 浏览:1264