CSS有很多深層的東西，我們大多數人沒有研究開，平時用到的只是一丁點最基本的知識。本文將給大家介紹如何用CSS創建面積chart圖，這一功能的實現讓我感覺到CSS的功能實在太強大了。

CSS創建面積chart圖

CSS

body {
  display: grid;
  place-items: center;
  height: 100vh;
  margin: 0;
  background-color: #222;
}
.area-chart {
  /* Reset */
  margin: 0;
  padding: 0;
  border: 0;

  /* Dimensions */
  width: 100%;
  max-width: var(--chart-width, 600px);
  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;
}
.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: polygon(
    0% calc(100% * (1 - var(--start))),
    100% calc(100% * (1 - var(--end))),
    100% 100%,
    0% 100%
  );
}

HTML

<ul class="area-chart">
  <li style="--start: 0.1; --end: 0.4;"> 40% </li>
  <li style="--start: 0.4; --end: 0.8;"> 80% </li>
  <li style="--start: 0.8; --end: 0.6;"> 60% </li>
  <li style="--start: 0.6; --end: 1.0;"> 100% </li>
  <li style="--start: 1.0; --end: 0.3;"> 30% </li>
</ul>

execcodegetcode

代碼解釋

1、本實例使用<ul>標簽作為<li>單個數據項的包裝器和元素。你可以根據需要在項目中使用任何其他 HTML 標記。

2、CSS 無法檢索內部 HTML 文本，所以使用 CSS 自定義屬性將數據傳遞給 CSS。每個數據項都有一個--start和一個--end自定義屬性。

• 單位的數據：在HTML中使用無單位的數據（即無px，em，rem，%或任何其他單位）的--start和--end自定義屬性將是0和1之間的數字。
• 列寬：不為每個<li>元素width設置固定值，也不使用%，因為不知道有多少項目。每個列的寬度將基于主包裝器寬度除以數據項的總數。在例子中，就是<ul>元素的寬度除以<li>元素的數量。
• 可訪問性：每個<li>內部的值是可選的，只有--start和--end自定義屬性是必需的。

3、先從一般布局樣式開始，圖表包裝器元素是一個 flex 容器，顯示一行中的項目，拉伸每個子元素以填充整個區域。

.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;
}

4、如果面積Chart圖包裝器是一個列表，我們應該刪除列表樣式以讓我們的樣式更多靈活性。

ul.area-chart,
ol.area-chart {
  list-style: none;
}

5、此代碼為整個圖表中的所有列設置樣式。使用條形Chart圖（Bar Charts）很簡單：我們對每一列使用background-color和height。對于面積Chart圖（Area Charts），我們將使用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屬性并使用包含該區域坐標的函數polygon()。這基本上沒有任何作用，因為都被多邊形涵蓋了：

.area-chart > * {
  clip-path: polygon(
    0% 0%,     /* top left */
    100% 0%,   /* top right */
    100% 100%, /* bottom right */
    0% 100%    /* bottom left */
  );
}

為了僅顯示該列的一部分，我們對其進行剪輯以創建類似面積圖的效果。為了只顯示我們想要的區域，我們在clip-path多邊形內使用--start和--end自定義屬性：

.area-chart > * {
  clip-path: polygon(
    0% calc(100% * (1 - var(--start))),
    100% calc(100% * (1 - var(--end))),
    100% 100%,
    0% 100%
  );
}

以上CSS就完成了所有工作！

多個數據集的面積Chart圖

我們了解了基礎知識之后，就可以進階創建一個包含多個數據集的面積圖。面積圖通常使用一組以上的數據，其效果是數據的分層比較。

多個數據集的面積Chart圖

demodownload

標簽: chart圖  css  css3