欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

用CSS Grid布局制作一個(gè)響應(yīng)式柱狀圖的實(shí)現(xiàn)

  發(fā)布時(shí)間：2020-05-26 16:02:49   作者：前端小蜜蜂   我要評(píng)論
這篇文章主要介紹了用CSS Grid布局制作一個(gè)響應(yīng)式柱狀圖的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

最新一段時(shí)間比較喜歡玩弄圖表，出于好奇，我想找出比較好的用 CSS 制作圖表的方案。開(kāi)始學(xué)習(xí)網(wǎng)上開(kāi)源圖表庫(kù)，它對(duì)我學(xué)習(xí)新的和不熟悉的前端技術(shù)很有幫助，比如這個(gè)：CSS Grid。

今天和大家分享我學(xué)到的新知識(shí)：如何用 CSS Grid 布局制作一個(gè)普通的響應(yīng)式柱狀圖。先上效果圖：

這篇文章的示例只是一個(gè)試驗(yàn)，用來(lái)學(xué)習(xí) CSS Grid 布局，加上本人也是現(xiàn)學(xué)現(xiàn)賣(mài)，所以本文出現(xiàn)的代碼不具有太多的參照意義。

第一個(gè)簡(jiǎn)單版本

第一眼看上去可能會(huì)有點(diǎn)不知道怎么開(kāi)始，因此我們先來(lái)關(guān)注如何創(chuàng)建一個(gè)簡(jiǎn)單的版本。首先，我們需要為圖表編寫(xiě) HTML 標(biāo)簽：

<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- 開(kāi)頭的 div 標(biāo)簽將對(duì)應(yīng)柱狀圖中的一條柱子，整篇文章所需要的 HTML 就這么多。

現(xiàn)在按照我的步驟和簡(jiǎn)單的解說(shuō)一步一步用 CSS 把柱狀圖大概的樣式畫(huà)出來(lái)，不用過(guò)多地?fù)?dān)心下面出現(xiàn)的可能對(duì)你有些陌生的 CSS 語(yǔ)義，稍后我們將重點(diǎn)介紹關(guān)于 CSS Grid 的知識(shí)。

好了，現(xiàn)在開(kāi)始我們的 CSS 樣式編寫(xiě)。我們先對(duì)父元素添加一些必要的樣式：

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background-color: #eee;
  display: flex;
  justify-content: center;
}

.chart {
  height: 100vh;
  width: 70vw;
}

我們需要在圖表中有 12 個(gè)條形，中間有 5px 的間距，按此需求，我們可以對(duì)父類(lèi) .chart 編寫(xiě)如下 Grid 相關(guān)的樣式：

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

對(duì)于熟悉 Grid 布局的人來(lái)說(shuō)，這是非常簡(jiǎn)單的。上面代碼表達(dá)的是：“我想要 12 列，每個(gè)子元素具有相同的寬度(1fr = 1 fraction)，高度分為 100 等分，1 等分為一行（這樣方便計(jì)算），它們之間有 5px 的間隔。”

到這里，我們的圖表仍然是空的，因?yàn)槲覀儧](méi)有告訴我們的子元素如何去占用網(wǎng)格中的空間。我們使用 grid-row-start 和 grid-row-end 屬性來(lái)填充網(wǎng)格中的垂直空間，后而我們將通過(guò)改變這兩個(gè)屬性來(lái)定義各個(gè)子元素自己的高度。為樣式類(lèi)為 bar 開(kāi)頭子元素添加如下樣：

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

現(xiàn)在可以得到這樣的效果：

我們告訴每個(gè)柱狀圖從網(wǎng)格的頂部(1)開(kāi)始，然后在底部(101)結(jié)束。上面我們把網(wǎng)格劃分了 100 行，為什么要使用 101 作為該屬性的值呢？如果你被這些 Grid 屬性搞蒙了，沒(méi)關(guān)系！在我們繼續(xù)之前，讓我們對(duì)此進(jìn)行一點(diǎn)探討。

理解網(wǎng)格線(xiàn)

Grid 布局的一個(gè)特殊之處就是網(wǎng)格線(xiàn)的概念，這對(duì)理解這個(gè)新的布局工具非常重要。以下是網(wǎng)格線(xiàn)在四行四列網(wǎng)格中繪制的示意圖:

這四行四列的對(duì)應(yīng)的樣式是這樣的（特殊的黑色區(qū)域?qū)?yīng)的樣式類(lèi)為 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-row 是 grid-row-start 和 grid-row-end 的簡(jiǎn)寫(xiě)屬性，前者表示元素在網(wǎng)格中的開(kāi)始位置，后者表示元素在網(wǎng)格中的結(jié)束位置。注意到?jīng)]，黑色塊是從第 2 條網(wǎng)格線(xiàn)開(kāi)始的，并在第 4 條網(wǎng)格線(xiàn)結(jié)束（而不是在第 4 行）。如果我們想讓那個(gè)黑盒子填滿(mǎn)所有 4 行，那么我們需要在第 5 條網(wǎng)格線(xiàn)結(jié)束，即：1 / 5。理解這一點(diǎn)很重要。

換句話(huà)說(shuō)，我們不應(yīng)該認(rèn)為子元素在一個(gè)網(wǎng)格中占據(jù)整個(gè)行或列，而應(yīng)該只跨越這些網(wǎng)格線(xiàn)的。我花了不少時(shí)間才從概念上理解并習(xí)慣了這一點(diǎn)，因?yàn)槲易罱钊胙芯苛?Jen Simmons 關(guān)于這個(gè)問(wèn)題的教程。

回到示例

這就是為什么在我們上面的圖表示例中，所有列都在 101 這個(gè)值結(jié)束，因?yàn)?101 代表的是第 101 條網(wǎng)絡(luò)線(xiàn)，而不是第 100 行。

現(xiàn)在，由于我們的 .chart 使用了 vw/vh 單位，也就有了一個(gè)響應(yīng)良好的圖表，不需要再做其它的額外工作來(lái)支持響應(yīng)式。如果你調(diào)整瀏覽器大小，你會(huì)發(fā)現(xiàn)它可以很好地壓縮或延伸，它總是占據(jù)整個(gè)視窗。

理解了網(wǎng)絡(luò)線(xiàn)的概念，我們就可以很輕松地為柱子調(diào)整高度了，我們需要讓各柱子高度參差不一。

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

最后我們使寄偶數(shù)的柱子顏色不一樣：

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

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

效果：

我們就這樣制作完成了一個(gè)支持響應(yīng)式的柱狀圖。當(dāng)然，這個(gè)示例只是一個(gè)開(kāi)始，距離要達(dá)到實(shí)際應(yīng)用的效果還有很多事情要做。比如畫(huà)標(biāo)注和軸、通過(guò) JS 來(lái)綁定真實(shí)的業(yè)務(wù)數(shù)據(jù)等。

到此這篇關(guān)于用CSS Grid布局制作一個(gè)響應(yīng)式柱狀圖的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)CSS Grid響應(yīng)式柱狀圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論