React+CSS 实现绘制竖状柱状图

更新时间：2022年09月13日 10:31:12 作者：鹿鱼

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

前言：

页面结构分为两个部分，柱状图 + 文字为一部分，标注为为一部分。

先来看柱状图 + 文字这一部分。

宽度定为 width: 55, height 高度使用百分比进行动态变化。整个部分使用 flex 布局。通过 justify-content: space-around; 属性，对里面的项目进行排列。项目 item 同样使用 flex 布局，这个是对柱状图 + 文字进行整体的排列。

<div className="crosswise_diagram_top">
  {listData.map((item) => {
    return (
      <div className="crosswise_diagram_item" key={item.value}>
        <div className="crosswise_diagram_item_precent">
          <div
            className="precent"
            style={{
              width: 55,
              height: `${item.percent}%`
            }}
          >
            <div>
              选项三 <span>254</span>
            </div>
          </div>
        </div>
        <div className="crosswise_diagram_item_name">{item.name}</div>
      </div>
    )
  })}
</div>

.crosswise_diagram_top {
  display: flex;
  justify-content: space-around;
  height: 100%;
  .crosswise_diagram_item {
    display: flex;
    flex-direction: column;
    width: 55px;
    position: relative;
    justify-content: end;
    height: 100%;
    .crosswise_diagram_item_name {
      margin-top: 11px;
      font-size: 16px;
      font-weight: 400;
      color: #07132b;
    }
    .crosswise_diagram_item_precent {
      height: 100%;
      display: contents;
      .precent {
        border-radius: 4px;
        position: relative;
        &::after {
          content: '';
          height: 102%;
          border-right: 1px dashed #07132b;
          position: absolute;
          top: -2%;
        }
        > div {
          position: absolute;
          width: 66px;
          text-align: center;
          top: -2%;
          height: 21px;
          margin-top: -21px;
        }
      }
    }
  }
}

下方的标注部分，使用绝对定位，width = 100%，height = 100%，实现标注和渐变柱形部分的重叠。

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

<div className="crosswise_diagram_bottom">
  <ul className="crosswise_diagram_ul">
    {scaleArray.map((item, itemIndex) => {
      return (
        <li
          className="crosswise_diagram_li"
          style={{ top: `${(100 / 5) * itemIndex}%` }}
          key={item}
        >
          <span className="crosswise_diagram_name">{item}</span>
          <span className="crosswise_diagram_precent" />
        </li>
      )
    })}
  </ul>
</div>

.crosswise_diagram_bottom {
  position: absolute;
  top: -36px;
  left: -55px;
  height: 100%;
  width: 100%;
  .crosswise_diagram_ul {
    width: 100%;
    .crosswise_diagram_li {
      width: 100%;
      position: absolute;
      display: flex;
      flex-direction: row;
      .crosswise_diagram_name {
        position: relative;
        top: -9px;
        width: 45px;
        font-size: 12px;
        font-weight: bold;
        color: #a6b1bf;
      }
      .crosswise_diagram_precent {
        width: 90%;
        height: 100%;
        border-top: 1px dashed #d7dbe0;
        color: #a6b1bf;
      }
    }
  }
}

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

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

获取最大值最近的100整数

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

计算每一个数据的 value，占最大值最近的100整数的百分比。

percent: (dataItem.value / maxScaleNum) * 100

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

const multiple = Math.floor(maxScaleNum / scaleNum)
const newArray = new Array()
for (let i = 0; i <= maxScaleNum; i += multiple) {
  newArray.push(i)
}
setScaleArray(newArray.reverse())

整体代码：

import React, { useState, useEffect } from 'react';
import ReactDom from 'react-dom';

const Test = ({ data, 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
    if (maxValue <= 0) {
      setScaleArray(new Array(scaleNum).fill(0))
      setListData(
        data.map((dataItem) => {
          return {
            name: dataItem.name,
            percent: 0,
            value: 0
          }
        })
      )
      return
    }

    setListData(
      data.map((dataItem) => {
        return {
          name: dataItem.name,
          percent: (dataItem.value / maxScaleNum) * 100,
          value: dataItem.value
        }
      })
    )
    const multiple = Math.floor(maxScaleNum / scaleNum)
    const newArray = new Array()
    for (let i = 0; i <= maxScaleNum; i += multiple) {
      newArray.push(i)
    }
    setScaleArray(newArray.reverse())
  }, [data, scaleNum])

  return (
    <section className="crosswise_diagram">
      <div className="crosswise_diagram_top">
        {listData.map((item) => {
          return (
            <div className="crosswise_diagram_item" key={item.value}>
              <div className="crosswise_diagram_item_precent">
                <div
                  className="precent"
                  style={{
                    width: 55,
                    height: `${item.percent}%`
                  }}
                >
                  <div>
                    选项三 <span>254</span>
                  </div>
                </div>
              </div>
              <div className="crosswise_diagram_item_name">{item.name}</div>
            </div>
          )
        })}
      </div>
      <div className="crosswise_diagram_bottom">
        <ul className="crosswise_diagram_ul">
          {scaleArray.map((item, itemIndex) => {
            return (
              <li
                className="crosswise_diagram_li"
                style={{ top: `${(100 / 5) * itemIndex}%` }}
                key={item}
              >
                <span className="crosswise_diagram_name">{item}</span>
                <span className="crosswise_diagram_precent" />
              </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 柱状图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

详解React native fetch遇到的坑
这篇文章主要介绍了详解React native fetch遇到的坑,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
详解React如何实现代码分割Code Splitting
这篇文章主要为大家介绍了React如何实现代码分割Code Splitting示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-08-08
React虚拟列表的实现
在开发过程中，总是遇到很多列表的显示。当上数量级别的列表渲染于浏览器，终会导致浏览器的性能下降，你可以选择其他方式避免，本文就介绍了虚拟列表来解决这个问题
2021-05-05
基于CSS实现MaterialUI按钮点击动画并封装成 React 组件
笔者先后开发过基于vue,react,angular等框架的项目,碧如vue生态的elementUI, ant-design-vue, iView等成熟的UI框架, react生态的ant-design, materialUI等,这些第三方UI框架极大的降低了我们开发一个项目的成本和复杂度,使开发者更专注于实现业务逻辑和服务化
2021-11-11
React中的JSX { }的使用详解
这篇文章主要介绍了React中的JSX{ }的使用,React使用JSX来替代常规的JavaScript，JSX可以理解为的JavaScript语法扩展，它里面的标签申明要符合XML规范要求，对React JSX使用感兴趣的朋友一起看看吧
2022-08-08
React如何实现Vue的watch监听属性
在 Vue 中可以简单地使用 watch 来监听数据的变化，还能获取到改变前的旧值，而在 React 中是没有 watch 的，今天通过本文给大家讲解React实现Vue的watch监听属性的方法,需要的朋友可以参考下
2023-06-06
如何在React中直接使用Redux
这篇文章主要介绍了如何在React中直接使用Redux,目前redux在react中使用是最多的，所以我们需要将之前编写的redux代码，融入到react当中去，本文给大家详细讲解，需要的朋友可以参考下
2022-11-11
详解React路由传参方法汇总记录
这篇文章主要介绍了详解React路由传参方法汇总记录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-11-11
解决react-connect中使用forwardRef遇到的问题
这篇文章主要介绍了解决react-connect中使用forwardRef遇到的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
详解超简单的react服务器渲染(ssr)入坑指南
这篇文章主要介绍了详解超简单的react服务器渲染(ssr)入坑指南，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-02-02