您现在的位置是：网站首页> 编程资料编程资料

React+CSS 实现绘制横向柱状图_React_

2023-05-24 511人已围观

简介 React+CSS 实现绘制横向柱状图_React_

前言：

页面一共分为两个结构

文字 + 渐变柱形图为一个部分，下面的标注为一个结构。

我们先看文字 + 渐变柱形图部分。

总体使用 flex 布局，左边文字部分占总体的 50%，右边的占剩余的空间部分。右侧渐变柱形部分的宽度是动态变化的。宽度是根据传入的 value，进行计算的。

 {listData.map((item, index) => { return ( {item.name}
 ) })}

.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%，让其定位在右侧。这样就实现了，标注和渐变柱形部分的重叠。

这部分将 li 标签的 width = 1px，height = 100%，间隔通过 left 来动态实现。

 {scaleArray.map((item, itemIndex) => { return ( {item}
 ) })}

.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; } } }

关于数值的计算，这里笔者是找到这一组数据里面的最大值

let maxValue = 0; data.forEach((dataItem) => { if (dataItem.value > maxValue) maxValue = dataItem.value; });

获取最大值最近的100整数

let maxScaleNum = Math.ceil(maxValue / 100) * 100

求取最小公倍数

let lcm = getLcm(maxScaleNum, scaleNum)

计算每一个数据的 value，占最小公倍数的百分比。

percent: (dataItem.value / lcm) * 100

标注的left，使用 for 循环生成。

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 (  {listData.map((item, index) => { return ( {item.name}
 ) })} 
 {scaleArray.map((item, itemIndex) => { return ( {item}
 ) })} 
 ) } ReactDom.render(, document.getElementById('app'));

运行结果：

到此这篇关于React+CSS 实现绘制横向柱状图的文章就介绍到这了,更多相关React+CSS 柱状图内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:

上一篇：commander脚手架工具使用详解_JavaScript_

下一篇：Vue中使用iframe踩坑问题记录 iframe+postMessage_vue.js_

您现在的位置是：网站首页> 编程资料编程资料

React+CSS 实现绘制横向柱状图_React_

相关内容

点击排行

本栏推荐

猜你喜欢