当前位置：首页 > news >正文

用react 写一个可左右滑动的柱状图

news 来源：原创 2025/8/27 21:45:08

效果图

✅ 项目结构

🚀 创建项目步骤

1️⃣ 打开终端或命令行，创建新项目：

2️⃣ 安装 recharts 图表库：

3️⃣ 替换默认代码：

4️⃣ 启动项目：

✅ 项目结构

scrollable-bar-chart/
├── node_modules/
├── public/
├── src/
│   ├── App.js
│   ├── ScrollableBarChart.js
│   └── index.js
├── package.json

🚀 创建项目步骤

1️⃣ 打开终端或命令行，创建新项目：

npx create-react-app scrollable-bar-chart
cd scrollable-bar-chart

2️⃣ 安装 `recharts` 图表库：

npm install recharts

3️⃣ 替换默认代码：

把 src/App.js 内容换成我给你的 App.js

import React from 'react';
import ScrollableBarChart from './ScrollableBarChart';function App() {return (<div style={{ padding: '20px' }}><h2>可滚动柱状图示例</h2><ScrollableBarChart /></div>);
}export default App;

创建一个新文件 src/ScrollableBarChart.js，粘贴我提供的图表代码

import React from "react";
import {BarChart,Bar,XAxis,YAxis,Tooltip,Legend,CartesianGrid,ReferenceLine,ReferenceArea,
} from "recharts";const data = [{ name: "09", solar: 20, discharge: 15, sell: 10, charge: -5 },{ name: "10", solar: 30, discharge: 20, sell: 15, charge: -10 },{ name: "11", solar: 40, discharge: 25, sell: 20, charge: -15 },{ name: "12", solar: 45, discharge: 30, sell: 25, charge: -20 },{ name: "13", solar: 50, discharge: 35, sell: 30, charge: -25 },{ name: "14", solar: 45, discharge: 30, sell: 25, charge: -20 },{ name: "15", solar: 40, discharge: 25, sell: 20, charge: -15 },{ name: "16", solar: 30, discharge: 20, sell: 15, charge: -10 },{ name: "17", solar: 25, discharge: 15, sell: 10, charge: -5 },{ name: "18", solar: 20, discharge: 10, sell: 5, charge: -3 },
];const ScrollableBarChart = () => {return (<div style={{ overflowX: "auto" }}><div style={{ width: "1200px", height: "400px" }}><BarChartdata={data}width={1200}height={400}margin={{ top: 20, right: 30, left: 20, bottom: 5 }}barGap={0}barCategoryGap={0}><CartesianGrid strokeDasharray="3 3" /><XAxis dataKey="name" /><YAxisdomain={[-100, 100]}ticks={[-100, -75, -50, -25, 0, 25, 50, 75, 100]}/><Tooltip /><Legend /><ReferenceLine y={0} stroke="#000" strokeWidth={2} /><ReferenceArea x1="12" x2="13" fill="#d0f0d0" fillOpacity={0.4} />{/* 顶部的柱子有上圆角 */}<BardataKey="solar"stackId="a"fill="#8dd1e1"barSize={30}radius={[10, 10, 0, 0]}name="光伏自发自用"/>{/* 中间无圆角 */}<BardataKey="discharge"stackId="a"fill="#82ca9d"barSize={30}radius={0}name="电池放电"/><BardataKey="sell"stackId="a"fill="#ffc658"barSize={30}radius={0}name="电力卖给电网"/>{/* 底部负值柱子有下圆角 */}<BardataKey="charge"stackId="a"fill="#8884d8"barSize={30}radius={[0, 0, 10, 10]}name="电池充电"/></BarChart></div></div>);
};export default ScrollableBarChart;

确保 src/index.js 和之前保持一致（一般不用改）

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

4️⃣ 启动项目：

npm start

浏览器会自动打开 http://localhost:3000

用react 写一个可左右滑动的柱状图

效果图目录效果图 ✅ 项目结构 🚀 创建项目步骤 1️⃣ 打开终端或命令行，创建新项目： 2️⃣ 安装 recharts 图表库： 3️⃣ 替换默认代码： 4️⃣ 启动项目： ✅ 项目结构 scrollable-bar-chart/ ├…...

编程日记 2025/8/27 21:45:08

【正点原子STM32MP257连载】第四章 ATK-DLMP257B功能测试——MIPI LCD测试

1）实验平台：正点原子ATK-DLMP257B开发板 2）浏览产品：www.alientek.com 3）全套实验源码手册视频下载：正点原子资料下载中心文章目录第四章 ATK-DLMP257B功能测试——MIPI LCD测试4.3 MIPI LCD测试4.3.1 使…...

编程日记 2025/8/27 21:41:01

【正点原子STM32MP257连载】第四章 ATK-DLMP257B功能测试——RS485串口测试

1）实验平台：正点原子ATK-DLMP257B开发板 2）浏览产品：www.alientek.com 3）全套实验源码手册视频下载：正点原子资料下载中心文章目录第四章 ATK-DLMP257B功能测试——RS485串口测试第四章 ATK-DLMP257B功能…...

编程日记 2025/8/27 9:55:53

Sui 的工具生态简化了游戏开发者的 Web3 集成流程

希望利用 Web3 独特协同效应的游戏开发者，常常在强大的区块链功能与流畅的游戏体验之间难以权衡。许多区块链方案要求大幅重构游戏基础架构，增加了开发难度，甚至需要学习全新的智能合约语言。而 Sui 通过直观的工具消除这一阻力，使…...

编程日记 2025/8/27 21:45:08

Vue 3 的组合式 API-hooks

Vue 3 的组合式 API 组合式 API 是 Vue 3 的核心特性之一，它允许开发者将组件的逻辑拆分为可复用的函数。组合式 API 的主要特点是逻辑复用：将逻辑提取到独立的函数中，方便在多个组件中复用。组织清晰：将相关的逻辑分组&#x…...

编程日记 2025/8/27 21:39:49

AOSP Android14 Launcher3——底部任务栏Taskbar详解

前言：Launcher3中底部Taskbar和Navbar，或者说中文里面的术语导航栏，这几个词是很容易让人混淆的地方。本文要介绍的是Taskbar。从字面上意思来看，Taskbar就是任务栏，任务栏是Launcher3中一个重要的组件，尤其…...

编程日记 2025/8/27 21:37:56

QGraphicsView、QGraphicsScene和QGraphicsItem图形视图框架（五）QGraphicsView的缩放和移动

QGraphicsView自带滚动条的显示，但是大部分的需求样式都不需要滚动条，并且要通过鼠标来控制视图的缩放和移动。需要重写QGraphicsView实现。一、相关函数 1.scale void QGraphicsView::scale(qreal sx, qreal sy) 按（sx，sy&…...

编程日记 2025/8/25 11:12:57

算法——果蝇算法

果蝇算法（Fruit Fly Optimization Algorithm，FOA）是一种受果蝇觅食行为启发而开发的群智能优化算法。以下从算法原理、算法流程、算法特点等方面为你详细讲述： 算法原理果蝇本身具有优于其他物种的嗅觉和视觉。在觅食过程中&am…...

编程日记 2025/8/27 21:38:53

重返JAVA之路——图书管理系统

目录一、功能介绍二、设计模块三、系统构建 1.book模块 2.operation模块输入循环和验证查找图书并处理借阅状态未找到图书的处理查找删除图书功能实现未找到图书的处理图书查找与归还 work方法实现图书信息输出 3. user模块实现四、主菜单一、功能介绍 …...

编程日记 2025/8/27 21:43:21

【16】数据结构之基于树的排序算法篇章

目录标题选择排序简单选择排序树形选择排序堆排序堆的定义Heap小跟堆大根堆堆的存储堆的代码设计堆排序的代码设计排序算法综合比较选择排序基本思想：从待排序的序列中选出最大值或最小值，交换该元素与待排序序列的头部元素，对剩下的元…...

编程日记 2025/8/22 15:34:05

Uniapp：确认框

目录一、出现场景二、效果展示三、具体使用一、出现场景在项目的开发中，会经常出现删除数据的情况，如果直接删除的话，可能会存在误删，用户体验不好，所以需要增加一个消息提示，提醒用户是否删除。二…...

编程日记 2025/8/27 4:04:29

pyswmm实现洪涝模拟

准备好.inp文件作为SWMM模型输入，调用pyswmm模块执行模拟，返回节点溢流量（flooding）作为积水量的初步表征。代码： from pyswmm import Simulation, Nodes import pandas as pddef run_swmm_simulation(inp_file, ou…...

编程日记 2025/8/26 11:39:12

My Diary Pro：记录生活，珍藏回忆

我的日记My Diary Pro是一个非常好用的手机日记软件，可以使用它来记录每日生活日常，不少的用户可能都知道在生活之中可能会发生一些比较的重要的事情，实际上我们都可以将这些内容记录下来。包括个人观点，旅行游记，心情…...

编程日记 2025/8/27 21:36:09

CSRF(跨站请求伪造)漏洞概述

CSRF(跨站请求伪造)漏洞概述一、什么是 CSRF 攻击者诱导已登录用户在不知情的情况下，对受信任网站执行未授权操作。简单说：你登录着网站A，攻击者诱导你访问某个恶意链接，使网站A误以为是你自己发出的操作（比…...

编程日记 2025/8/27 20:36:46

[Java实战经验]对象拷贝

目录谨慎重写clone方法重写clone()支持深拷贝带来的问题合适的深拷贝首先，对于不可变的类，我们不应该实现Cloneable接口，因为不可变类不需要拷贝，直接引用即可，实现Cloneable接口只会造成浪费。对于Java可变类来说…...

编程日记 2025/8/23 1:23:25

WAF防火墙：构筑Web应用安全的“隐形护盾”

在数字化时代，Web应用已成为企业服务与用户交互的核心窗口。然而，随之而来的SQL注入、跨站脚本攻击（XSS）、DDoS攻击等威胁，时刻考验着网站的安全防线。Web应用防火墙（WAF）作为关键防护工具&…...

编程日记 2025/8/17 18:50:21

开源智慧巡检——无人机油田AI视频监控的未来之力

油田巡检，关乎能源命脉，却常受困于广袤地形、高危环境和人工效率瓶颈。管道泄漏、设备故障、非法闯入——这些隐患稍有疏忽，便可能酿成大患。传统巡检已无法满足现代油田对安全与效率的需求，而无人机油田巡检系统正以智能化之力重…...

编程日记 2025/8/27 21:44:19

【2025年泰迪杯数据挖掘挑战赛】B题完整论文模型建立与求解

目录 2025年泰迪杯数据挖掘挑战赛 B题完整论文：建模与求解 Matlab代码一、问题重述二、模型假设与符号说明2.1 模型基本假设2.2 符号说明三、数据预处理**问题一：志愿者身体活动信息的统计分析****问题二：身体活动MET值的实时估计模型构建**…...

编程日记 2025/8/27 21:41:00

Chromium 134 编译指南 macOS篇：安装 Xcode（二）

1. 引言在Chromium开发的征程中，为macOS平台构建正确的开发环境是成功编译的关键基础。继上一篇系统环境准备后，本文将重点介绍Xcode的安装与配置过程。作为macOS上不可或缺的集成开发环境(IDE)，Xcode为Chromium 134的编译提供了必要的编译…...

编程日记 2025/8/27 21:42:02

软件定义网络（SDN）：重塑未来网络的革命性架构

在当今数字化时代，网络已成为企业、云计算、5G通信和物联网（IoT）的核心基础设施。然而，传统网络架构由于其封闭、静态和分布式的特性，难以应对快速变化的业务需求。软件定义网络（Software-Defined Networki…...

编程日记 2025/8/25 12:02:13

Java虚拟机面试题：类加载机制

🧑 博主简介：CSDN博客专家，历代文学网（PC端可以访问：https://literature.sinhy.com/#/?__c1000，移动端可微信小程序搜索“历代文学”）总架构师，15年工作经验，精通Java编…...

编程日记 2025/8/22 20:51:22

OCCT 入门（3）核心模块与架构

文章目录一、核心模块与架构1、架构概述2、核心模块3、数据流转3.1、几何创建（Geometric Primitives）3.2、拓扑构建（Topology Construction）3.3、模型处理（Modeling Algorithms）3.4、可视化（Vi…...

编程日记 2025/8/27 21:44:18

MAC-需求：10万订单异步执行库存扣减、短信通知。

批量任务并行处理实现，通过拆分任务、异步执行和线程池管理提升处理。 10万订单异步处理方案设计基于图中代码的批量处理框架，结合订单业务需求，以下是库存扣减与短信通知的异步实现： 1. 代码实现（基于原有框架改造） @Service public…...

编程日记 2025/8/26 22:41:07

ArrayList vs LinkedList，HashMap vs TreeMap：如何选择最适合的集合类？

精心整理了最新的面试资料和简历模板，有需要的可以自行获取点击前往百度网盘获取点击前往夸克网盘获取在 Java 开发中，集合类的选择直接影响程序的性能和代码的可维护性。不同的数据结构适用于不同的场景，盲目使用可能导致内存浪费、性能…...

编程日记 2025/8/27 21:35:39

使用Form.List且有Select组件

当在使用Form.List组件，且组件中有Select选项时，针对每一次选择，都要过滤掉那些已经选择过的选项，可能遇到的问题： 直接过滤会将每一个Select中的options选项都过滤掉，无法正常展示选择的选项解决办法&a…...

编程日记 2025/8/27 21:37:55

大数据学习笔记

文章目录 1. 大数据概述1.1 大数据的特性1.2 大数据技术生态1.2.1 Hadoop 的概念特性1.2.2 Hadoop生态圈 — 核心组件与技术栈1.2.3 Hadoop生态演进趋势 2. 数据处理流程与技术栈2.1 数据采集2.1.1 日志采集工具2.1.2 实时数据流2.1.3 数据迁移 2.2 数据预处理2.2.1 批处理2.2.…...

编程日记 2025/8/27 21:43:21

Obsidian 文件夹体系构建 -INKA

Obsidian 文件夹体系构建 -INKA 本篇文章主要分享一下自己折腾学习实践过的 INKA 框架方法。原地址：Obsidian文件夹体系构建–INKA。文章目录 Obsidian 文件夹体系构建 -INKA前言INKA简介INKA 理论最佳实践实际应用反思前言上文 Obsidian文件夹体系构建-ACCES…...

编程日记 2025/8/27 21:44:19

QML与C++：基于ListView调用外部模型进行增删改查（性能优化版）

目录引言相关阅读工程结构数据模型设计DataModel 类ContactProxyModel 类为什么使用QSortFilterProxyModel？应用初始化与模型连接UI实现性能分析与优化运行效果扩展思考总结下载链接引言在上一篇中介绍了基于ListView调用外部模型进行增删改查，本文…...

编程日记 2025/8/27 21:35:41

集合常用Stream操作

1、中间操作 filter()过滤将流中的元素筛选出满足条件的元素 List<String> list Arrays.asList("abc","test","demo","frse","fesfes"); list.stream().filter(s -> s.startsWith("f")).forEach(Sy…...

编程日记 2025/8/27 21:45:07

ReactNative中处理安全区域问题

RN原生方案不支持android系统，所以在此使用三方组件react-native-safe-area-context 1、安装插件 yarn add react-native-safe-area-context2、安装完成后直接yarn ios可能会失败，需要先 cd ios && pod install && cd ..出来再继…...

编程日记 2025/8/27 21:44:19

二、The Power of LLM Function Calling

一、Function Calling 的诞生背景 1. 传统LLM的局限性静态文本生成的不足：早期的LLM（如早期版本的ChatGPT）主要依赖预训练的知识库生成文本，但无法直接与外部系统或API交互。这意味着它们只能基于历史数据回答问题，…...

编程日记 2025/8/27 21:39:51

贪心算法day10（无重叠区间）

1.无重叠区间 435. 无重叠区间 - 力扣（LeetCode） 思路： 代码： class Solution {public static int eraseOverlapIntervals(int[][] intervals) {Arrays.sort(intervals,(v1,v2)->{return v1[0]-v2[0];});int left interva…...

编程日记 2025/8/23 14:49:33

reactive 解构赋值给 ref

在 Vue 3 中，当你执行以下操作时： javascript const applyBasicInfo ref(); applyBasicInfo.value { ...props.applyBasicInfo }; 最终的 applyBasicInfo.value 是响应式对象，但与原对象 props.applyBasicInfo 的响应性完全独立&#xf…...

编程日记 2025/8/27 21:44:18

MongoDB简单用法

图片中 MongoDB Compass 中显示了默认的三个数据库： adminconfiglocal 如果在 .env 文件中配置的是： MONGODB_URImongodb://admin:passwordlocalhost:27017/ MONGODB_NAMERAGSAAS💡 一、为什么 Compass 里没有 RAGSAAS 数据库？…...

编程日记 2025/8/27 21:44:19

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（4）：可能形（かのうけい）

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（4）：可能形（かのうけい） 1、前言（1）情况说明（2）工程师的信仰2、知识点（1）～んです　　復習（ふくしゅう）（２）いただけませんか復習（ふくしゅう）（３）可能形（かのうけい）（１）１グループ：（２）２グループ…...

编程日记 2025/8/27 21:44:18

Windows 下 MongoDB ZIP 版本安装指南

在开发和生产环境中，MongoDB 是一种非常流行的 NoSQL 数据库，以其灵活性和高性能而受到开发者的青睐。对于 Windows 用户来说，MongoDB 提供了多种安装方式，其中 ZIP 版本因其灵活性和轻量级的特点，成为很多开发者的首选…...

编程日记 2025/8/26 18:16:45

万字长篇————C语言指针学习汇总

经过一段时间的学习，我们已经接触到了C语言的很多知识了。不过目前我们接下来我们要接触C语言中一个最大的“门槛”：指针。什么是指针？ 在介绍指针之前，我们首先要明白变量与地址之间的关系。举一个生活中的案例：一…...

编程日记 2025/8/27 1:21:13

day29图像处理OpenCV

文章目录一、图像预处理6 图像色彩空间转换6.3灰色/BGR/HSV相互转化 7 彩图转灰图方法7.1 最大值法7.2 平均值法7.3 加权均值法7.4 案例 8 图像二值化处理8.1 阈值法(typecv2.THRESH_BINARY)8.2 反阈值法(THRESH_BINARY_INV)8.3 截断阈值法(THRESH_TRUNC)8.4 低阈值零处理(THR…...

编程日记 2025/8/25 22:30:29

Spring Boot 项目三种打印日志的方法详解。Logger，log，logger 解读。

目录一. 打印日志的常见三种方法？ 1.1 手动创建 Logger 对象（基于SLF4J API） 1.2 使用 Lombok 插件的 Slf4j 注解 1.3 使用 Spring 的 Log 接口（使用频率较低） 二. 常见的 Logger，logger，…...

编程日记 2025/8/19 8:59:28

KrillinAI：视频跨语言传播的一站式AI解决方案

引言在全球内容创作领域，跨语言传播一直是内容创作者面临的巨大挑战。传统的视频本地化流程繁琐，涉及多个环节和工具，不仅耗时耗力，还常常面临质量不稳定的问题。随着大语言模型(LLM)技术的迅猛发展，一款名为Krillin…...

编程日记 2025/8/17 21:29:34

PDF处理控件Aspose.PDF指南：使用 C# 从 PDF 文档中删除页面

需要从 PDF 文档中删除特定页面？本快速指南将向您展示如何仅用几行代码删除不需要的页面。无论您是清理报告、跳过空白页，还是在共享前自定义文档，C# 都能让 PDF 操作变得简单高效。学习如何以编程方式从 PDF 文档中选择和删除特定页面&#…...

编程日记 2025/8/22 17:16:41

在 IntelliJ IDEA 中开发 Java Web 项目时，遇到包内明明存在某个类但类名仍然爆红（显示红色错误提示）

在 IntelliJ IDEA 中开发 Java Web 项目时，遇到包内明明存在某个类但类名仍然爆红（显示红色错误提示），而项目却能正常运行，重启 IDEA 后问题依旧，这通常是由以下原因及解决方法导致的： 1. 缓存…...

编程日记 2025/8/17 18:49:25

【4】k8s集群管理系列--harbor镜像仓库本地化搭建

一、harbor基本概念 ‌Harbor是一个由VMware开源的企业级Docker镜像仓库解决方案‌，旨在解决企业在容器化应用部署中的痛点，提供镜像存储、管理、安全和分发的全生命周期管理‌。Harbor扩展了Docker Registry，增加了企业级功能，如…...

编程日记 2025/8/25 13:00:10

Active Directory域服务管理与高级应用技术白皮书

目录一、Active Directory核心架构解析 1.1 AD域服务核心组件 1.2 域功能级别演进 1.3 AD LDS应用场景二、企业级域环境部署最佳实践 2.1 域控制器部署规划 2.2 高可用架构设计 2.3 客户端入域优化三、高级域管理技术 3.1 精细化权限管理 3.2 组策略深度配置 3.3…...

编程日记 2025/8/22 7:17:31

OCP中的OCS operator介绍及应用示例

一、OCS operator介绍在 Red Hat OpenShift Container Platform（OCP4.8版之前，包含4.8） 中，OCS Operator（OpenShift Container Storage Operator） 是用于在 OpenShift 集群中部署、配置和管理 OpenShift …...

编程日记 2025/8/26 12:54:08

Linux-服务器添加审计日志功能

#查看audit软件是否在运行（状态为active而且为绿色表示已经在运行） systemctl start auditd #如果没有在运行的话，查看是否被系统禁用（audit为0表示被禁用） cat /proc/cmdline | grep -w "audit=0" #修改/etc/default/grub里面audit=0 改为audit=1 #更新GRUB…...

编程日记 2025/8/22 8:28:14

ARM Cortex-M中断处理全解析

今天我们聊一聊ARM Cortex-M中断处理。在嵌入式系统中，中断是实现实时响应的核心机制。想象一下，如果没有中断： 按键按下时，系统可能忙于其他任务而错过响应通信数据到来时，可能因为没及时处理而丢失定时任务难以精确…...

编程日记 2025/8/22 13:31:28

douyin_search_tool | 用python开发的抖音关键词搜索采集软件

本软件工具仅限于学术交流使用，严格遵循相关法律法规，符合平台内容合法性，禁止用于任何商业用途！ 抖音作为国内颇受欢迎的短视频社交平台，汇聚了大量用户群体和活跃用户。分析平台上的热门视频可用于市场调研和竞品分析…...

编程日记 2025/8/24 16:04:07

Unix系统版本 FreeBSD-10.1-i386 网络配置 1.配置网络ip及网关 #编辑配置文件 ee /etc/rc.conf #参照如下内容设置 ifconfig_em0”inet 192.168.1.189 netmask 255.255.255.0” defaultrouter”192.168.1.1” #回到命令模式 esc #保存 a a 2.配置dns #编辑配置文件 ee /etc/…...

编程日记 2025/8/20 8:03:48

Margin和Padding在WPF和CSS中的不同

CSS和WPF中 margin 与 padding 在方向上的规定基本一致，但在使用场景和一些细节上有所不同。 CSS - 方向规定： margin 和 padding 属性可以分别指定上、右、下、左四个方向的值。例如 margin:10px 20px 30px 40px; 表示上外边距为10px、右外边距为20…...

编程日记 2025/8/20 7:30:13

效果图

✅ 项目结构

🚀 创建项目步骤

1️⃣ 打开终端或命令行，创建新项目：

2️⃣ 安装 recharts 图表库：

3️⃣ 替换默认代码：

4️⃣ 启动项目：

相关文章：

2️⃣ 安装 `recharts` 图表库：