關於如何使用原生HTML + JS + CSS繪製簡單折線柱狀圖

Alander發表於2018-11-29
HTMLJSCSS

前言

CSS確實很重要，且有點奇技淫巧，看起來規則十分簡單，但是創意更重要，如何用css構造出自己想要的效果，寫的程式碼好看優雅十分重要。 在看了不借助Echarts等圖形框架原生JS快速實現折線圖效果並自己重新實現了以後，實在是感慨CSS的強大之處，並作出記錄。

正文

先上結果圖：

結果

總結下自己覺得關於幾點比較難以理解的點：

1. 如何實現以下效果：

一個DIV
以上是由一個div配合其after偽元素完成的

  • 中間的橫線其實很簡單，在我之前關於背景漸變的文章裡有提到，直接 上程式碼：
<style>
.chartX {
  width: 670px;
  height: 250px;
  position: relative;
  border-top: 1px solid #ccc;
  margin: 100px auto;
  background: linear-gradient(to top, #ccc 0, #ccc 1px, transparent 1px);
  background-size: 100% 50px;
  font-size: 0;
  text-align: center;
}
</style>
<div class="chartX">
</div>
複製程式碼
  • 難點在於如何實現側邊欄的數字排列？ 先上結論：
  1. 從0 - 100其實是在一個盒子裡，這個盒子的高度應該是由line-height來確定的
  2. 由於line-height具有垂直居中的特點，只要讓line boxes排在左邊就好了
  3. 利用absolute定位來定位該盒子

再上程式碼：

<style>
.chartX::after {
  content: '100 \a 80 \a 60 \a 40 \a 20 \a 0 ';
  line-height: 50px;
  white-space: pre;
  position: absolute;
  font-size: 12px;
  top: -25px;
  left: -2rem;
  text-align: right;
}
</style>
複製程式碼

最後解釋： 我們應該讓每一個元素佔據一行，且這一行的高度和背景橫線之間的間距相等然後讓其中的文字居中顯示，這樣就有6行文字分別與背景線對齊了。 所以我們要做的第一點就是寫出6行文字：即程式碼中的

content: '100 \a 80 \a 60 \a 40 \a 20 \a 0 ';
white-space: pre;
複製程式碼

content定義了內容，‘\a' 為換行，同時設定 white-space: pre;保持文字的空格符和換行，說白了就是讓每個數字間換行，於是就有了從上至下排列的 100 80 60 40 20 0這樣一列數字。

上一步完成後就需要保證每一行的高度為橫線間距相等在本文中即為：50px。怎麼做呢？其實在我的之前一篇文章中的關於CSS：line-height中有了答案，在沒有height屬性下，我們通過line-height來控制盒子的高度，即:

line-height: 50px;
複製程式碼

這樣每一行都是50px的高度，再將盒子整體往上移動25px就做到了使得背景橫線與line-height的中線處於同一高度，即數字被橫線縱向對半分割。

完成了座標系的繪製後，應該實現柱狀圖的繪製

單個柱狀圖怎麼繪製

如何實現下面的這個效果呢？

柱狀圖

幾個點注意一下：

  • 如何再底部顯示月份？
  • 如何繪製中間的圓點？

直接上程式碼：

<style>
.result-bg {
  display: inline-block;
  position: relative;
  width: calc((100% - 16px * 13) / 12);
  height: 100%;
  background: #eee;
}
.result-bg::after {
  content: attr(data-month)'月';
  font-size: 12px;
  color: grey;
  position: absolute;
  bottom: -1rem;
  left: 0;
  right: 0;
}
.dot {
  border: 2px solid #97cd74;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  left: 0;
  right: 0;
  top: 15px;
  margin: auto;
}
</style>
<div class="chartX">
    <div class="result-bg" data-month="1">
      <div class="result-bar" style="height: 82%">
        <div class="dot"></div>
      </div>
    </div>
<div>
複製程式碼

再來解釋： 首先式底部文字的問題： 使用偽元素after的content屬性 這裡要普及以下，content屬性中可以使用attr了，即獲取元素的自定義屬性值，所以才有了以上程式碼：

 content: attr(data-month)'月';
 <div class="result-bg" data-month="1">
複製程式碼

配合absolute定位自然繪出了文字

至於中間的點的問題： 畫出一個這個樣式的點不稀奇，如何讓它居中呢？參考我的另一篇文章：關於CSS:關於absolute定位 即讓bounding-box的寬度等同於父元素高度，然後我們讓圓點的margin為auto自然就居中啦，表現程式碼如上，不做多餘解釋，需要讀者自行嘗試程式碼。

多個柱狀圖的圓點間怎麼連線

需要實現下面的效果：

兩個

這裡就真的只能用到js了，因為要手動計算距離和旋轉的角度啊

總結關鍵點：

  1. 動態計算出兩點之間的距離
  2. 計算出需要偏轉的角度
  3. 利用transform：rotate（）來實現旋轉

以上都不是難點，需要注意的是，rotate的時候需要以左邊端點為中心進行旋轉。先上線段的CSS程式碼：

<style>
.dot i {
  display: inline-block;
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -1px;
  height: 2px;
  background: #97cd74;
  border-right: 3px solid #fff;
  border-left: 3px solid #fff;
  transform-origin: left;
  z-index: 1;
}
</style>
<div class="chartX">
    <div class="result-bg" data-month="11">
      <div class="result-bar" style="height: 82%">
        <div class="dot">
            <i></i>
        </div>
      </div>
    </div>
    <div class="result-bg" data-month="12">
      <div class="result-bar" style="height: 62%">
        <div class="dot">
            <i></i>
        </div>
      </div>
    </div>
<div>
複製程式碼

i標籤就是我們的線段啦，然後為線段設定背景顏色即可 其中的transform-origin:left即為設定旋轉中心點

最後只需要用js來動態的給每個柱子新增i標籤，並設定其長度和旋轉角度就可以了，程式碼如下：

const bars = document.querySelectorAll('.result-bar .dot')
bars.forEach((bar, index) => {
  const nextBar = bars[index + 1]
  if (!nextBar) {
    return
  }
  let elLine = bar.querySelector('i')
  if (!elLine) {
    elLine = document.createElement('i')
    elLine.setAttribute('line', '')
    bar.appendChild(elLine)
  }
  // 計算線段長度和旋轉弧度
  let boundThis = bar.getBoundingClientRect(),
      boundNext = nextBar.getBoundingClientRect(),
      x1 = boundThis.left,
      y1 = boundThis.top,
      x2 = boundNext.left,
      y2 = boundNext.top,
      distance = Math.sqrt(Math.pow((x1 - x2), 2) + Math.pow((y1 - y2), 2)),
      radius = Math.atan((y2 - y1) / (x2 - x1))
  console.log(distance, radius)
  elLine.style.width = `${distance}px`
  elLine.style.transform=`rotate(${radius}rad)`
})
複製程式碼

至此結束。

結語

以上實現方式真的只是拾人牙慧，能夠從張鑫旭前輩的程式碼中學習到這麼多東西真的感到敬畏。 以上完整程式碼均在github中，歡迎指正學習。

相關文章