原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
第
React+CSS实现绘制横向柱状图
前言：
页面一共分为两个结构
文字+渐变柱形图为一个部分，下面的标注为一个结构。
我们先看文字+渐变柱形图部分。
总体使用flex布局，左边文字部分占总体的50%，右边的占剩余的空间部分。右侧渐变柱形部分的宽度是动态变化的。宽度是根据传入的value，进行计算的。
sectionclassName=graphschart-1
{listData.map((item,index)={
return(
divclassName=chart-2key={index}
divclassName=chart-3
span{item.name}/span
/div
divclassName=chart-4
div
.graphs{
width:100%;
position:relative;
.chart-1{
.chart-2{
display:flex;
.chart-3{
flex:00auto;
width:50%;
.chart-4{
flex:11auto;
}
下方的标注部分，使用绝对定位，width=50%，占父元素整体的一半，left=50%，让其定位在右侧。这样就实现了，标注和渐变柱形部分的重叠。
这部分将li标签的width=1px，height=100%，间隔通过left来动态实现。
divclassName=bar-10
ulclassName=chart-11
{scaleArray.map((item,itemIndex)={
return(
className=chart-12
.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:1pxsolid#d7dbe0;
}
关于数值的计算，这里笔者是找到这一组数据里面的最大值
letmaxValue=0;
data.forEach((dataItem)={
if(dataItem.valuemaxValue)maxValue=dataItem.value;
});
获取最大值最近的100整数
letmaxScaleNum=Math.ceil(maxValue/100)*100
求取最小公倍数
letlcm=getLcm(maxScaleNum,scaleNum)
计算每一个数据的value，占最小公倍数的百分比。
percent:(dataItem.value/lcm)*100
标注的left，使用for循环生成。
constnewArray=newArray();
for(leti=0;i=lcm;i+=lcm/scaleNum){
newArray.push(i);
}
整体代码：
importReact,{useState,useEffect}fromreact;
importReactDomfromreact-dom;
functiongetGcd(a,b){
letmax=Math.max(a,b);
letmin=Math.min(a,b);
if(max%min===0){
returnmin;
}else{
returngetGcd(max%min,min);
functiongetLcm(a,b){
returna*b/getGcd(a,b);
constTest=({data,style,scaleNum=5})={
const
文档评论（0）