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

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

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

第一個簡單版本

第一眼看上去可能會有點不知道怎么開始，因此我們先來關(guān)注如何創(chuàng)建一個簡單的版本。首先，我們需要為圖表編寫 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 標簽將對應(yīng)柱狀圖中的一條柱子，整篇文章所需要的 HTML 就這么多。

現(xiàn)在按照我的步驟和簡單的解說一步一步用 CSS 把柱狀圖大概的樣式畫出來，不用過多地擔心下面出現(xiàn)的可能對你有些陌生的 CSS 語義，稍后我們將重點介紹關(guān)于 CSS Grid 的知識。

好了，現(xiàn)在開始我們的 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 相關(guān)的樣式：

.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 的間隔。”

到這里，我們的圖表仍然是空的，因為我們沒有告訴我們的子元素如何去占用網(wǎng)格中的空間。我們使用 grid-row-start 和 grid-row-end 屬性來填充網(wǎng)格中的垂直空間，后而我們將通過改變這兩個屬性來定義各個子元素自己的高度。為樣式類為 bar 開頭子元素添加如下樣：

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

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

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

理解網(wǎng)格線

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

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

換句話說，我們不應(yīng)該認為子元素在一個網(wǎng)格中占據(jù)整個行或列，而應(yīng)該只跨越這些網(wǎng)格線的。我花了不少時間才從概念上理解并習(xí)慣了這一點，因為我最近深入研究了 Jen Simmons 關(guān)于這個問題的教程。

回到示例

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

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

理解了網(wǎng)絡(luò)線的概念，我們就可以很輕松地為柱子調(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;
}

效果：

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

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

最新評論