css响应式布局_用 CSS Grid 布局制作一个响应式柱状图

最新一段时间比较喜欢玩弄图表,出于好奇,我想找出比较好的用 CSS 制作图表的方案。开始学习网上开源图表库,它对我学习新的和不熟悉的前端技术很有帮助,比如这个:CSS Grid。

今天和大家分享我学到的新知识:如何用 CSS Grid 布局制作一个普通的响应式柱状图。先上效果图:

c59fa829478bace0dd6d0637ad087eec.png
这篇文章的示例只是一个试验,用来学习 CSS Grid 布局,加上本人也是现学现卖,所以本文出现的代码不具有太多的参照意义。

第一个简单版本

第一眼看上去可能会有点不知道怎么开始,因此我们先来关注如何创建一个简单的版本。首先,我们需要为图表编写 HTML 标签:

<div class="chart"><div class="bar-1"></div><div class="bar-2"></div><div class="bar-3"></div><div class="bar-4"></div><!-- 一直到 bar-12 -->
</div>

这些 bar- 开头的 div 标签将对应柱状图中的一条柱子,整篇文章所需要的 HTML 就这么多。

现在按照我的步骤和简单的解说一步一步用 CSS 把柱状图大概的样式画出来,不用过多地担心下面出现的可能对你有些陌生的 CSS 语义,稍后我们将重点介绍关于 CSS Grid 的知识。

好了,现在开始我们的 CSS 样式编写。我们先对父元素添加一些必要的样式:

* {box-sizing: border-box;
}html,
body {margin: 0;background-color: #eee;display: flex;justify-content: center;
}.chart {height: 100vh;width: 70vw;
}

我们需要在图表中有 12 个条形,中间有 5px 的间距,按此需求,我们可以对父类 .chart 编写如下 Grid 相关的样式:

.chart {display: grid;grid-template-columns: repeat(12, 1fr);grid-template-rows: repeat(100, 1fr);grid-column-gap: 5px;
}

对于熟悉 Grid 布局的人来说,这是非常简单的。上面代码表达的是:“我想要 12 列,每个子元素具有相同的宽度(1fr = 1 fraction),高度分为 100 等分,1 等分为一行(这样方便计算),它们之间有 5px 的间隔。”

到这里,我们的图表仍然是空的,因为我们没有告诉我们的子元素如何去占用网格中的空间。我们使用 grid-row-startgrid-row-end 属性来填充网格中的垂直空间,后而我们将通过改变这两个属性来定义各个子元素自己的高度。为样式类为 bar 开头子元素添加如下样:

[class*='bar'] {grid-row-start: 1;grid-row-end: 101;border-radius: 5px 5px 0 0;background-color: #ff4136;
}

现在可以得到这样的效果:

425f163678709f200e906913bee1cb00.png

我们告诉每个柱状图从网格的顶部(1)开始,然后在底部(101)结束。上面我们把网格划分了 100 行,为什么要使用 101 作为该属性的值呢?如果你被这些 Grid 属性搞蒙了,没关系!在我们继续之前,让我们对此进行一点探讨。

理解网格线

Grid 布局的一个特殊之处就是网格线的概念,这对理解这个新的布局工具非常重要。以下是网格线在四行四列网格中绘制的示意图:

361f92c55e77df88fb872e243c44229b.png

这四行四列的对应的样式是这样的(特殊的黑色区域对应的样式类为 special-col):

.grid {grid-gap: 5px;grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(4, 1fr);
}.special-col {grid-row: 2 / 4;background-color: #333;
}

grid-rowgrid-row-startgrid-row-end 的简写属性,前者表示元素在网格中的开始位置,后者表示元素在网格中的结束位置。注意到没,黑色块是从第 2 条网格线开始的,并在第 4 条网格线结束(而不是在第 4 行)。如果我们想让那个黑盒子填满所有 4 行,那么我们需要在第 5 条网格线结束,即:1 / 5。理解这一点很重要。

换句话说,我们不应该认为子元素在一个网格中占据整个行或列,而应该是只跨越这些网格线的。

回到示例

这就是为什么在我们上面的图表示例中,所有列都在 101 这个值结束,因为 101 代表的是第 101 条网络线,而不是第 100 行。

现在,由于我们的 .chart 使用了 vw/vh 单位,也就有了一个响应良好的图表,不需要再做其它的额外工作来支持响应式。如果你调整浏览器大小,你会发现它可以很好地压缩或延伸,它总是占据整个视窗。

理解了网络线的概念,我们就可以很轻松地为柱子调整高度了,我们需要让各柱子高度参差不一。

.bar-1 {grid-row-start: 55;
}
.bar-2 {grid-row-start: 1;
}
...(略);

最后我们使寄偶数的柱子颜色不一样:

[class*='bar']:nth-child(odd) {background-color: #ff4136;
}[class*='bar']:nth-child(even) {background-color: #0074d9;
}

效果:

50054decfca1b542ffb02ed38bb44dfc.png

我们就这样制作完成了一个支持响应式的柱状图。当然,这个示例只是一个开始,距离要达到实际应用的效果还有很多事情要做。比如画标注和轴、通过 JS 来绑定真实的业务数据等。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/505384.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

leetcode33 --- search

1 题目 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], ..., nums[n-1], nums[0], num…

leetcode39 --- combinationSum

1 题目 给定一个无重复元素的数组 candidates 和一个目标数 target &#xff0c;找出 candidates 中所有可以使数字和为 target 的组合。 candidates 中的数字可以无限制重复被选取。 说明&#xff1a; 所有数字&#xff08;包括 target&#xff09;都是正整数。 解集不能包…

vs code 插件_[VSCode插件开发] 由浅入深,带你了解如何打造百万级产品

去年&#xff0c;笔者有幸在微软技术暨生态大会上做了个演讲&#xff0c;主题是“从零开始开发一款属于你的 Visual Studio Code 插件”。演讲内容主要覆盖了VS Code插件开发的四个方面&#xff1a;设计、实现、推广和维护。作为一个开发者&#xff0c;我们往往会把大多数的时间…

leetcode45 --- jump

1 题目 给定一个非负整数数组&#xff0c;你最初位于数组的第一个位置。 数组中的每个元素代表你在该位置可以跳跃的最大长度。 你的目标是使用最少的跳跃次数到达数组的最后一个位置。 假设你总是可以到达数组的最后一个位置。 2 解法 2.1 从终点遍历的方法(时间复杂度)…

python怎么查看网页编码格式_怎么用python爬取网页文字?

用Python进行爬取网页文字的代码&#xff1a;#!/usr/bin/python# -*- coding: UTF-8 -*-import requestsimport re# 下载一个网页url htt用python进行爬取网页文字的代码&#xff1a;#!/usr/bin/python# -*- coding: UTF-8 -*-import requestsimport re# 下载一个网页url htt…

leetcode51 --- solveNQueens

1 题目 n 皇后问题 研究的是如何将 n 个皇后放置在 nn 的棋盘上&#xff0c;并且使皇后彼此之间不能相互攻击。 给你一个整数 n &#xff0c;返回所有不同的 n 皇后问题 的解决方案。 每一种解法包含一个不同的 n 皇后问题 的棋子放置方案&#xff0c;该方案中 Q 和 . 分别代…

leetcode41 --- firstMissingPositive

1 题目 给你一个未排序的整数数组 nums &#xff0c;请你找出其中没有出现的最小的正整数。 请你实现时间复杂度为 O(n) 并且只使用常数级别额外空间的解决方案。 2 解法 最笨的方法是从1开始试, 看1在数组里面是否出现过, 2, 3, ....不过时间复杂度是. 2.1 hash 可以考虑…

python二十四点_Python秒算24点,行还是不行?

周末闲来无事&#xff0c;看到隔壁家的老王在和隔壁家的媳妇玩24点&#xff0c;就进屋看了看。发现老王是真不行啊&#xff0c;那不行&#xff0c;这也不行。 就连个24点都玩不过他媳妇&#xff0c;给他媳妇气的&#xff0c;啥都不能满足&#xff0c;这不能&#xff0c;那也不能…

python设置文件编码_python批量修改文件编码格式的方法

本文实例为大家分享了python批量修改文件编码格式的具体代码&#xff0c;供大家参考&#xff0c;具体内容如下 使用说明&#xff1a; 1、使用工具&#xff1a;Python2.7.6chardet2.3.0&#xff0c;chardet2.3.0下载地址&#xff1a;点击这里 2、环境配置&#xff1a;Python安装…

leetcode42 --- trap

1 题目 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 2 思路 这个题主要是要清楚, 接的最多的雨水总量为一个位置的最高水位减去这个位置的高度(也就是该位置的接水量)的总和, 而每一个位置的最高水…

手机上python编程工具3和3h有区别吗_Python 高级 3

1.编辑器vim 目标 能够说出vim三种工作模式 能够写出vim复制、剪切、粘贴、选中多行命令 yy,dd,p,数字V 能够写出查找、替换命令 :/要查找的内容&#xff0c;n下一个&#xff0c;N上一个 :%s/要替换的内容/新内容/g :10-20s/要替换的内容/新内容 <1>vim简 介 vim是一个类…

计算机网络中的数据链路层

概述 结点: 主机, 路由器 链路: 网络中两个结点之间的物理通道, 链路的传输介质主要有双绞线, 光纤和微波, 分为有线链路和无线链路. 数据链路: 网络中两个结点之间的逻辑通道, 把实现控制数据传输协议的硬件和软件加到链路上就构成数据链路. 帧: 链路层的协议数据单元…

jnativecpp.dll一定要放到系统目录下吗_电脑硬盘有必要分区吗,分几个区最好?...

购买电脑后&#xff0c;必不可少的一个步骤就是对电脑硬盘进行分区了&#xff0c;其实硬盘分区也是有讲究的&#xff0c;并不是随意分的&#xff0c;下面租物租就给大家介绍下电脑分区的知识。硬盘分区可以提高数据的安全&#xff0c;防止数据丢失&#xff0c;但是防止数据丢失…

leetcode37 --- solveSudoku(解数独)

1 题目 编写一个程序&#xff0c;通过填充空格来解决数独问题。 数独的解法需 遵循如下规则&#xff1a; 数字 1-9 在每一行只能出现一次。 数字 1-9 在每一列只能出现一次。 数字 1-9 在每一个以粗实线分隔的 3x3 宫内只能出现一次。&#xff08;请参考示例图&#xff09; …

pythonsuper多重继承_Python super()函数使用及多重继承

super()函数可以用于继承父类的方法&#xff0c;语法如下&#xff1a; super(type[, object-or-type]) 虽然super()函数的使用比较简单&#xff0c;但是需要根据单继承和多继承来分析函数的调用关系。 首先&#xff0c;当类之间的继承关系为单继承时&#xff0c;函数调用关系也…

数据结构中的树

1. 树 即是以层次化方式组织和存放数据的特定数据结构 边: 节点与节点之间的连线 根节点: 叶子节点: 度: 节点的度数即为其分叉数, 即其子节点个数. 整棵树的度数是所有节点中度数的最大值 节点深度: 根节点到该节点的唯一路径长(即边的数量) 树高: 所有节点中深度的最大…

python中字典的键是唯一的吗_在python3中反转字典中的键和值(值不唯一)

我知道当值是唯一的时,如何简单地在字典中反转键和值. 但是当值不唯一时如何反转. 根据要求,如果值出现不止一次,我需要使用set来将它们组合在一起. 防爆.输入d {‘a’&#xff1a;1,’b’&#xff1a;2,’c’&#xff1a;1,’d’&#xff1a;2}输出d {1,{‘a’,’c’},2,{‘…

排序算法 --- 堆排序

根据大顶堆的描述, 父节点的值始终大于子节点(如果有的话)的值, 再加上堆是完全二叉树, 可以用数组表示, 那么就可以用来进行排序. 具体做法就是, 对于随机排列的数组: 1. 首先将其构建成一个大顶堆, 根据堆的性质, 此时堆顶就是最大值. 2. 把堆顶元素与数组最后一个元素进行…

数据结构中的树 --- 红黑树

红黑树是一种几近平衡的二叉搜索树, 但不是AVL树. 1 红黑树的一些特殊性质 1. 每个节点皆为红色或者黑色。 2. 根节点是黑色。 3. 每个叶子节点&#xff08;NIL&#xff09;是黑色(注意, 每个叶子节点必须都为空节点, 也就是指针为nullptr, 无key值)。 4. 每个红色结点的两…

c++数据结构中 顺序队列的队首队尾_数据结构与算法—队列详解

前言栈和队列是一对好兄弟&#xff0c;前面我们介绍过数据结构与算法—栈详解&#xff0c;那么栈的机制相对简单&#xff0c;后入先出&#xff0c;就像进入一个狭小的山洞&#xff0c;山洞只有一个出口&#xff0c;只能后进先出(在外面的先出去)。而队列就好比是一个隧道&#…