卡卡網(wǎng)

CSS有很多深層的東西，我們大多數(shù)人沒(méi)有研究開(kāi)，平時(shí)用到的只是一丁點(diǎn)最基本的知識(shí)。本文將給大家介紹如何用CSS創(chuàng)建面積chart圖，這一功能的實(shí)現(xiàn)讓我感覺(jué)到CSS的功能實(shí)在太強(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、本實(shí)例使用<ul>標(biāo)簽作為<li>單個(gè)數(shù)據(jù)項(xiàng)的包裝器和元素。你可以根據(jù)需要在項(xiàng)目中使用任何其他 HTML 標(biāo)記。

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

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

3、先從一般布局樣式開(kāi)始，圖表包裝器元素是一個(gè) flex 容器，顯示一行中的項(xiàng)目，拉伸每個(gè)子元素以填充整個(gè)區(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圖包裝器是一個(gè)列表，我們應(yīng)該刪除列表樣式以讓我們的樣式更多靈活性。

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

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

首先我們?cè)O(shè)置每一列：

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

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

要?jiǎng)?chuàng)建一個(gè)覆蓋整個(gè)區(qū)域的矩形，我們將訪問(wèn)該clip-path屬性并使用包含該區(qū)域坐標(biāo)的函數(shù)polygon()。這基本上沒(méi)有任何作用，因?yàn)槎急欢噙呅魏w了：

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

為了僅顯示該列的一部分，我們對(duì)其進(jìn)行剪輯以創(chuàng)建類似面積圖的效果。為了只顯示我們想要的區(qū)域，我們?cè)?code>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就完成了所有工作！

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

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

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

demodownload

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