卡卡網(wǎng)

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

CSS創(chuàng)建面積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>標(biāo)簽作為<li>單個數(shù)據(jù)項的包裝器和元素。你可以根據(jù)需要在項目中使用任何其他 HTML 標(biāo)記。

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

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

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

.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圖包裝器是一個列表，我們應(yīng)該刪除列表樣式以讓我們的樣式更多靈活性。

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

5、此代碼為整個圖表中的所有列設(shè)置樣式。使用條形Chart圖（Bar Charts）很簡單：我們對每一列使用background-color和height。對于面積Chart圖（Area Charts），我們將使用clip-path屬性設(shè)置應(yīng)顯示的區(qū)域。

首先我們設(shè)置每一列：

.area-chart > * {
  /* Even size items */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;

  /* Color */
  background: var(--color, rgba(240, 50, 50, .75));
}

要創(chuàng)建一個覆蓋整個區(qū)域的矩形，我們將訪問該clip-path屬性并使用包含該區(qū)域坐標(biāo)的函數(shù)polygon()。這基本上沒有任何作用，因為都被多邊形涵蓋了：

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

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

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

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

多個數(shù)據(jù)集的面積Chart圖

我們了解了基礎(chǔ)知識之后，就可以進(jìn)階創(chuàng)建一個包含多個數(shù)據(jù)集的面積圖。面積圖通常使用一組以上的數(shù)據(jù)，其效果是數(shù)據(jù)的分層比較。

多個數(shù)據(jù)集的面積Chart圖

demodownload

標(biāo)簽: chart圖  css  css3