CSS確實很重要，且有點奇技淫巧，看起來規則十分簡單，但是創意更重要，如何用css構造出自己想要的效果，寫的代碼好看優雅十分重要。 在看了 不借助Echarts等圖形框架原生JS快速實現折線圖效果，并自己重新實現了以后，實在是感慨CSS的強大之處，并作出記錄。
先上結果圖：
總結下自己覺得關于幾點比較難以理解的點：
1. 如何實現以下效果：
以上是由一個div配合其after偽元素完成的，中間的橫線其實很簡單，在我之前關于背景漸變的文章里有提到，直接上代碼：
.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;
}
難點在于如何實現側邊欄的數字排列？ 先上結論：
從0 - 100其實是在一個盒子里，這個盒子的高度應該是由line-height來確定的，由于line-height具有垂直居中的特點，只要讓line boxes排在左邊就好了，利用absolute定位來定位該盒子。
再上代碼：
.chartX::after {
content: '100 \a 80 \a 60 \a 40 \a 20 \a 0 ';
line-height: 50px;
white-space: pre;
position: absolute;
top: -25px;
left: -2rem;
text-align: right;
}
復制代碼
最后解釋： 我們應該讓每一個元素占據一行，且這一行的高度和背景橫線之間的間距相等然后讓其中的文字居中顯示，這樣就有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的中線處于同一高度，即數字被橫線縱向對半分割。
完成了坐標系的繪制后，應該實現柱狀圖的繪制，單個柱狀圖怎么繪制，如何實現下面的這個效果呢？
幾個點注意一下：
如何再底部顯示月份？如何繪制中間的圓點？直接上代碼：
.result-bg {
display: inline-block;
position: relative;
width: calc((100% - 16px * 13) / 12);
height: 100%;
background: #eee;
}
.result-bg::after {
content: attr(data-month)'月';
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;
}
再來解釋： 首先式底部文字的問題： 使用偽元素after的content屬性 這里要普及以下，content屬性中可以使用attr了，即獲取元素的自定義屬性值，所以才有了以上代碼：
content: attr(data-month)'月';
配合absolute定位自然繪出了文字。
至于中間的點的問題： 畫出一個這個樣式的點不稀奇，如何讓它居中呢？參考我的另一篇文章：關于CSS:關于absolute定位 即讓bounding-box的寬度等同于父元素高度，然后我們讓圓點的margin為auto自然就居中啦，表現代碼如上，不做多余解釋，需要讀者自行嘗試代碼。
多個柱狀圖的圓點間怎么連線，需要實現下面的效果：
這里就真的只能用到js了，因為要手動計算距離和旋轉的角度啊，總結關鍵點：
動態計算出兩點之間的距離，計算出需要偏轉的角度，利用transform：rotate()來實現旋轉。
以上都不是難點，需要注意的是，rotate的時候需要以左邊端點為中心進行旋轉。先上線段的CSS代碼：
.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;
}
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)`
})
至此結束。
該文章在 2022/10/21 17:42:36 編輯過
400 186 1886
