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

2024-04-02 19:04:59 948人浏览薄情痞子

摘要

前言：页面一共分为两个结构文字 + 渐变柱形图为一个部分，下面的标注为一个结构。我们先看文字 + 渐变柱形图部分。总体使用 flex 布局，左边文字部分占总体的 50%，右

前言：

页面一共分为两个结构

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

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

总体使用 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 柱状图内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: React+CSS实现绘制横向柱状图

本文链接: https://www.lsjlt.com/news/167376.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

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

前言：页面一共分为两个结构文字 + 渐变柱形图为一个部分，下面的标注为一个结构。我们先看文字 + 渐变柱形图部分。总体使用 flex 布局，左边文字部分占总体的 50%，右...

99+

2024-04-02
React+CSS 实现绘制竖状柱状图

前言：页面结构分为两个部分，柱状图 + 文字为一部分，标注为为一部分。先来看柱状图 + 文字这一部分。宽度定为 width: 55, height ...

99+

2024-04-02
python绘制横向水平柱状条形图

python绘制横向水平柱状条形图Bar，供大家参考，具体内容如下 import matplotlib import random import matplotlib.pyplot ...

99+

2024-04-02
vue echarts实现横向柱状图

本文实例为大家分享了vue echarts实现横向柱状图的具体代码，供大家参考，具体内容如下实现效果：代码： <template> <div clas...

99+

2024-04-02
python怎么绘制横向水平柱状条形图

这篇文章主要介绍“python怎么绘制横向水平柱状条形图”，在日常操作中，相信很多人在python怎么绘制横向水平柱状条形图问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”python怎么绘制横向水平柱状条形图...

99+

2023-06-30
vue实现横向斜切柱状图

本文实例为大家分享了vue实现横向斜切柱状图的具体代码，供大家参考，具体内容如下实现效果：实现代码： <template> <div class="C...

99+

2024-04-02
vue+echarts实现条纹柱状横向图

本文实例为大家分享了vue+echarts实现条纹柱状横向图的具体代码，供大家参考，具体内容如下实现效果： <template> <div id="Busi...

99+

2024-04-02
React less 实现纵横柱状图示例详解

目录引言主要设计来源display 布局display 布局动态位置使用绝对定位styleJS引言之前的文章，咱们介绍过横向和竖向，具体的内容，请看 React + CSS 绘制横...

99+

2024-04-02
PyQt5+QtChart实现柱状图的绘制

目录柱状图分类实现代码效果图柱状图分类 QBarSeries：竖向柱状图 QPercentBarSeries：竖向百分比柱状图 QStackedBarSeries：竖向堆叠柱状图 Q...

99+

2022-12-15

PyQt5 QtChart绘制柱状图 PyQt5 QtChart 柱状图 PyQt5 QtChart
vue+echarts怎么实现条纹柱状横向图

这篇“vue+echarts怎么实现条纹柱状横向图”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue+echarts怎么实...

99+

2023-06-29
Pythonpyecharts绘制柱状图

目录一、pyecharts绘制柱状图语法简介二、绘制普通柱状图三、绘制堆叠柱状图四、绘制横向柱状图五、pyecharts柱状图datazoom案例六、对应pyecharts柱...

99+

2024-04-02
Matplotlib绘制柱状图

利用matplotlib绘制柱状图柱状图是一种用矩形柱来表示数据分类的图表，柱状图可以垂直绘制，也可以水平绘制，它的高度与其所表示的数值成正比关系。柱状图显示了不同类别之间的比较关系，图表的水平轴 X 指定被比较的类别，垂直轴 Y 则表...

99+

2023-10-24

matplotlib python 开发语言 Powered by 金山文档
Echarts Bar横向柱状图实例代码

目录横向柱状图动态更新数据和样式解决 echarts 宽高自适应问题纵向柱状图纵向柱状图实现坐标指示器背景渐变色柱体设置不同颜色柱状图上方显示数值tooltip 提示框自定义总体实现...

99+

2024-04-02
Python实现动态柱状图的绘制

目录一.基础柱状图二.基础时间线柱状图三.GDP动态柱状图绘制四.完整代码一.基础柱状图如图演示 from pyecharts.charts import Bar from p...

99+

2022-12-29

Python绘制动态柱状图 Python动态柱状图 Python 柱状图
echarts怎么实现带百分比的横向柱状图

这篇文章主要讲解了“echarts怎么实现带百分比的横向柱状图”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“echarts怎么实现带百分比的横向柱状图”吧！实例代码var data...

99+

2023-06-25
echarts如何实现带百分比的横向柱状图

目录实例代码效果图代码解析总结实例代码 var data = [220, 182, 191, 234, 290, 120, 65, 444]; var barWidth = 20...

99+

2024-04-02
python如何绘制柱状图

1、插件安装安装两种插件 pip install -i https://pypi.tuna.tsinghua.edu.cn/simple matplotlibpip install -i https...

99+

2023-10-04

matplotlib python
Python用 matplotlib 绘制柱状图

目录1. 柱状图概述1.1什么是柱状图1.2柱状图使用场景1.3柱状图绘制步骤1.3案例展示 2. 柱状图属性2.1柱状体颜色填充2.2状描边设置2.3状体边框宽度2.4刻度标签3....

99+

2024-04-02
利用Matlab实现阴影柱状图的绘制

目录示例图使用教程1.基本使用2.添加图例3.阴影格式4.特殊结构5.额外修饰工具函数完整代码封面图绘制代码阴影柱状图绘制的代码MATHWORKS上也有，不过是生成图片后，识别图像上...

99+

2024-04-02
Python绘制柱状图堆叠图

本文详细介绍如何使用 Matplotlib 绘制柱状堆叠图文章目录一、引入库二、数据准备三、绘制基本柱状堆叠图1.绘制基本图形2.设置柱子宽度、添加刻度标签和旋转角度四、完整代码五...

99+

2023-09-13

python matplotlib 开发语言