CSS確實(shí)很重要，且有點(diǎn)奇技淫巧，看起來規(guī)則十分簡單，但是創(chuàng)意更重要，如何用css構(gòu)造出自己想要的效果，寫的代碼好看優(yōu)雅十分重要。 在看了 不借助Echarts等圖形框架原生JS快速實(shí)現(xiàn)折線圖效果，并自己重新實(shí)現(xiàn)了以后，實(shí)在是感慨CSS的強(qiáng)大之處，并作出記錄。
先上結(jié)果圖：
總結(jié)下自己覺得關(guān)于幾點(diǎn)比較難以理解的點(diǎn)：
1. 如何實(shí)現(xiàn)以下效果：
以上是由一個(gè)div配合其after偽元素完成的，中間的橫線其實(shí)很簡單，在我之前關(guān)于背景漸變的文章里有提到，直接上代碼：
.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;
}
難點(diǎn)在于如何實(shí)現(xiàn)側(cè)邊欄的數(shù)字排列？ 先上結(jié)論：
從0 - 100其實(shí)是在一個(gè)盒子里，這個(gè)盒子的高度應(yīng)該是由line-height來確定的，由于line-height具有垂直居中的特點(diǎn)，只要讓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;
}
復(fù)制代碼
最后解釋： 我們應(yīng)該讓每一個(gè)元素占據(jù)一行，且這一行的高度和背景橫線之間的間距相等然后讓其中的文字居中顯示，這樣就有6行文字分別與背景線對齊了。 所以我們要做的第一點(diǎn)就是寫出6行文字：即代碼中的
content: '100 \a 80 \a 60 \a 40 \a 20 \a 0 ';
white-space: pre;
復(fù)制代碼
content定義了內(nèi)容，‘\a' 為換行，同時(shí)設(shè)置 white-space: pre; 保持文字的空格符和換行，說白了就是讓每個(gè)數(shù)字間換行，于是就有了從上至下排列的 100 80 60 40 20 0這樣一列數(shù)字。
上一步完成后就需要保證每一行的高度為橫線間距相等在本文中即為：50px。怎么做呢？其實(shí)在我的之前一篇文章中的關(guān)于CSS：line-height中有了答案，在沒有height屬性下，我們通過line-height來控制盒子的高度，即:
line-height: 50px;
復(fù)制代碼
這樣每一行都是50px的高度，再將盒子整體往上移動25px就做到了使得背景橫線與line-height的中線處于同一高度，即數(shù)字被橫線縱向?qū)Π敕指睢?/p>
完成了坐標(biāo)系的繪制后，應(yīng)該實(shí)現(xiàn)柱狀圖的繪制，單個(gè)柱狀圖怎么繪制，如何實(shí)現(xiàn)下面的這個(gè)效果呢？
幾個(gè)點(diǎn)注意一下：
如何再底部顯示月份？如何繪制中間的圓點(diǎn)？直接上代碼：
.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定位自然繪出了文字。
至于中間的點(diǎn)的問題： 畫出一個(gè)這個(gè)樣式的點(diǎn)不稀奇，如何讓它居中呢？參考我的另一篇文章：關(guān)于CSS:關(guān)于absolute定位 即讓bounding-box的寬度等同于父元素高度，然后我們讓圓點(diǎn)的margin為auto自然就居中啦，表現(xiàn)代碼如上，不做多余解釋，需要讀者自行嘗試代碼。
多個(gè)柱狀圖的圓點(diǎn)間怎么連線，需要實(shí)現(xiàn)下面的效果：
這里就真的只能用到j(luò)s了，因?yàn)橐謩佑?jì)算距離和旋轉(zhuǎn)的角度啊，總結(jié)關(guān)鍵點(diǎn)：
動態(tài)計(jì)算出兩點(diǎn)之間的距離，計(jì)算出需要偏轉(zhuǎn)的角度，利用transform：rotate()來實(shí)現(xiàn)旋轉(zhuǎn)。
以上都不是難點(diǎn)，需要注意的是，rotate的時(shí)候需要以左邊端點(diǎn)為中心進(jìn)行旋轉(zhuǎn)。先上線段的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標(biāo)簽就是我們的線段啦，然后為線段設(shè)置背景顏色即可 其中的 transform-origin:left 即為設(shè)置旋轉(zhuǎn)中心點(diǎn)，最后只需要用js來動態(tài)的給每個(gè)柱子添加i標(biāo)簽，并設(shè)置其長度和旋轉(zhuǎn)角度就可以了，代碼如下：
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)
}
// 計(jì)算線段長度和旋轉(zhuǎn)弧度
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)`
})
至此結(jié)束。
該文章在 2022/10/21 17:42:36 編輯過
400 186 1886
