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

更新时间：2022年09月13日 09:57:51 作者：鹿鱼

这篇文章主要介绍了React+CSS 实现绘制横向柱状图，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下

前言：

页面一共分为两个结构

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

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

总体使用 flex 布局，左边文字部分占总体的 50%，右边的占剩余的空间部分。右侧渐变柱形部分的宽度是动态变化的。宽度是根据传入的 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%，让其定位在右侧。这样就实现了，标注和渐变柱形部分的重叠。

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

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

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

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 (
    <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 实现绘制横向柱状图的文章就介绍到这了,更多相关React+CSS 柱状图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

React组件通信的实现示例
在React中,组件通信是一个重要的概念,它允许不同组件之间进行数据传递和交互，本文主要介绍了React组件通信的实现示例，感兴趣的可以了解一下
2023-11-11
Javascript之提高React性能的技巧
一些刚开始学习 React，或者从其他框架转入 React 的开发者，一开始可能不会太关注性能。因为需要一些时间来发现新学习的框架的性能缺点。这篇文章主要介绍提高React性能的技巧，感兴趣的同学可以参考阅读
2023-04-04
React降级配置及Ant Design配置详解
这篇文章主要介绍了React降级配置及Ant Design配置详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
详解React Native顶|底部导航使用小技巧
本篇文章主要介绍了详解React Native顶|底部导航使用小技巧，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
浅谈React和Redux的连接react-redux
本篇文章主要介绍了浅谈React和Redux的连接react-redux，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12
React中组件通信的几种主要方式
React知识中一个主要内容便是组件之间的通信,以下列举几种常用的组件通信方式,通过代码示例介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2024-10-10
React中的useState和setState的执行机制详解
这篇文章主要介绍了React中的useState和setState的执行机制,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
React项目中fetch实现跨域接收传递session的解决方案
这篇文章主要介绍了React项目中fetch实现跨域接收传递session的解决方案,本次项目使用了react框架，同时使用fetch取代ajax作为获取接口数据的交互方法，下面就对这次问题的解决做个总结，需要的朋友可以参考下
2022-04-04
在console中打印React Fiber树的操作步骤
React Fiber 是 React 16 中引入的新的协调引擎或重写的核心算法, 真针Fiber的一个重要的核心概念Fiber Node,这次主要的研究对象是：如何从使用者/学习者角度在js 代码上拿到fiber 树结构的信息,,需要的朋友可以参考下
2024-04-04
React循环遍历渲染数组和对象元素方式
这篇文章主要介绍了React循环遍历渲染数组和对象元素方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具