React+CSS 實現(xiàn)繪制橫向柱狀圖
更新時間：2022年09月13日 09:57:51 作者：鹿魚???????
這篇文章主要介紹了React+CSS 實現(xiàn)繪制橫向柱狀圖，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
前言：
頁面一共分為兩個結構
文字 + 漸變柱形圖為一個部分，下面的標注為一個結構。
我們先看文字 + 漸變柱形圖部分。
總體使用 flex 布局，左邊文字部分占總體的 50%，右邊的占剩余的空間部分。右側漸變柱形部分的寬度是動態(tài)變化的。寬度是根據(jù)傳入的 value，進行計算的。
<section className="graphs" style={style}>
<div className="chart-1">
{listData.map((item, index) => {
return (
<div className="chart-2" key={index}>
<div className="chart-3">
<span>{item.name}</span>
</div>
<div className="chart-4">
<div style={{ width: `${item.percent}%`, height: 24 }} />
</div>
</div>
)
})}
</div>
</section>.graphs {
width: 100%;
position: relative;
.chart-1 {
.chart-2 {
display: flex;
.chart-3 {
flex: 0 0 auto;
width: 50%;
}
.chart-4 {
flex: 1 1 auto;
}
}
}
}
下方的標注部分，使用絕對定位，width = 50%，占父元素整體的一半，left = 50%，讓其定位在右側。這樣就實現(xiàn)了，標注和漸變柱形部分的重疊。
這部分將 li 標簽的 width = 1px，height = 100%，間隔通過 left 來動態(tài)實現(xiàn)。
<div className="bar-10">
<ul className="chart-11">
{scaleArray.map((item, itemIndex) => {
return (
<li
className="chart-12"
style={{ left: `${(100 / scaleNum) * itemIndex}%` }}
key={itemIndex}
>
<span>{item}</span>
</li>
)
})}
</ul>
</div>.bar-10 {
position: absolute;
top: 0px;
height: 100%;
width: 50%;
left: 50%;
box-sizing: border-box;
.chart-11 {
height: 100%;
position: relative;
width: 100%;
.chart-12 {
position: absolute;
top: -3px;
width: 1px;
height: 89%;
border-right: 1px solid #d7dbe0;
}
}
}
關于數(shù)值的計算，這里筆者是找到這一組數(shù)據(jù)里面的最大值
let maxValue = 0;
data.forEach((dataItem) => {
if (dataItem.value > maxValue) maxValue = dataItem.value;
});獲取最大值最近的100整數(shù)
let maxScaleNum = Math.ceil(maxValue / 100) * 100
求取最小公倍數(shù)
let lcm = getLcm(maxScaleNum, scaleNum)
計算每一個數(shù)據(jù)的 value，占最小公倍數(shù)的百分比。
percent: (dataItem.value / lcm) * 100
標注的left，使用 for 循環(huán)生成。
const newArray = new Array();
for (let i = 0; i <= lcm; i += lcm / scaleNum) {
newArray.push(i);
}整體代碼：
import React, { useState, useEffect } from 'react';
import ReactDom from 'react-dom';
function getGcd(a, b) {
let max = Math.max(a, b);
let min = Math.min(a, b);
if (max % min === 0) {
return min;
} else {
return getGcd(max % min, min);
}
}
function getLcm(a, b) {
return a * b / getGcd(a, b);
}
const Test = ({ data, style, scaleNum = 5 }) => {
const [listData, setListData] = useState([])
const [scaleArray, setScaleArray] = useState([])
useEffect(() => {
if (scaleNum <= 0) {
return
}
let maxValue = 0
data.forEach((dataItem) => {
if (dataItem.value > maxValue) maxValue = dataItem.value
})
let maxScaleNum = Math.ceil(maxValue / 100) * 100
let lcm = getLcm(maxScaleNum, scaleNum)
if (maxValue <= 0) {
const newArray = [0]
let number = 0
for (let i = 0; i < scaleNum; i++) {
newArray.push((number += 20))
}
setScaleArray(newArray)
setListData(
data.map((dataItem) => {
return {
name: dataItem.name,
percent: 0,
value: dataItem.value
}
})
)
return
}
setListData(
data.map((dataItem) => {
return {
name: dataItem.name,
percent: (dataItem.value / lcm) * 100,
value: dataItem.value
}
})
)
const newArray = new Array()
for (let i = 0; i <= lcm; i += (lcm / scaleNum)) {
newArray.push(i)
}
setScaleArray(newArray)
}, [data, scaleNum])
return (
<section className="graphs" style={style}>
<div className="chart-1">
{listData.map((item, index) => {
return (
<div className="chart-2" key={index}>
<div className="chart-3">
<span>{item.name}</span>
</div>
<div className="chart-4">
<div style={{ width: `${item.percent}%`, height: 24 }} />
</div>
</div>
)
})}
</div>
<div className="bar-5">
<ul className="chart-6">
{scaleArray.map((item, itemIndex) => {
return (
<li
className="chart-7"
style={{ left: `${(100 / scaleNum) * itemIndex}%` }}
key={itemIndex}
>
<span>{item}</span>
</li>
)
})}
</ul>
</div>
</section>
)
}
ReactDom.render(<Test style={{ width: 440 }}
scaleNum={6}
data={[
{
name: '西瓜',
value: 40
},
{
name: '菠蘿',
value: 56
},
{
name: '香蕉',
value: 47
}
]} />, document.getElementById('app'));
運行結果：
到此這篇關于React+CSS 實現(xiàn)繪制橫向柱狀圖的文章就介紹到這了,更多相關React+CSS 柱狀圖內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
用React-Native+Mobx做一個迷你水果商城APP(附源碼)
這篇文章主要介紹了用React-Native+Mobx做一個迷你水果商城APP,功能需要的朋友可以參考下2017-12-12
這篇文章主要為大家介紹了ReactJS?應用兼容ios9對標ie11解決方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要介紹了在create-react-app中使用sass的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
React router動態(tài)加載組件之適配器模式的應用詳解
這篇文章主要介紹了React router動態(tài)加載組件之適配器模式的應用 ,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
這篇文章主要介紹了react中Suspense的使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要介紹了React通過classnames庫添加類,在vue中添加class是一件非常簡單的事情，你可以通過傳入一個對象, 通過布爾值決定是否添加類，本文給大家介紹的非常詳細，需要的朋友可以參考下2022-09-09
小編需要封裝一個通過Popover彈出框里可以自定義渲染內容的組件，渲染內容暫時有: 單選框, 復選框，接下來通過本文給大家分享React封裝CustomSelect組件思路,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了react中涉及的增加,刪除list方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
React+umi+typeScript創(chuàng)建項目的過程
這篇文章主要介紹了React+umi+typeScript創(chuàng)建項目的過程,結合代碼介紹了項目框架搭建的方式，本文給大家講解的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
這篇文章主要介紹了React中引入less、less-loader問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01