react-vis 零构建上手：在 CodePen 中通过 CDN 快速体验数据可视化组件

数据可视化图表库前端【免费下载链接】react-visData Visualization Components项目地址https://gitcode.com/gh_mirrors/re/react-vis点击查看免费下载本文基于 react-vis 官方「React-vis in codepen」入门文档完整讲解如何在无需 npm 安装、无需本地构建的前提下仅靠浏览器端引入 CDN 脚本即可开始绘制折线图、散点图等常见图表。读完本文你将掌握 CodePen 模板的使用方法、unpkg CDN 的版本化引用方式、reactVis 全局对象的可用组件清单以及该方式与 npm 工程化安装之间的取舍关系。为什么先在 CodePen 里体验 react-visreact-vis 是一套基于 React 与 d3 构建的声明式可视化组件库详见 package.json 中的项目描述其组件化 API 非常适合快速出图。对于尚未建立前端工程或者只想验证一个图表想法是否可行的场景在 CodePen 这类在线代码编辑器中运行是成本最低的路径——你不需要执行npm install、不需要配置 webpack 或 Babel浏览器加载一个脚本文件即可开始编码。官方文档给出了官方维护的 CodePen 模板 PenBZOeZB你可以在 mdRoutes.js 中看到该文档被注册为官网「React-vis in codepen」页面说明这是官方推荐的快速入门路径之一。核心思路通过 unpkg CDN 加载浏览器构建产物每个发布到 npm 的 react-vis 版本都会同步到 unpkg.com 这个 CDN 服务上因此可以直接通过 URL 按版本号引用库文件。官方文档推荐的方式是在 CodePen 的 HTML 面板中「添加 react 文件」并链接到 react-vis 最新版的浏览器构建产物script srchttps://unpkg.com/react-vis1.6.7/dist/dist.min.js/script这里有几个值得注意的细节版本可固定URL 中的1.6.7表示精确锁定版本避免 unpkg 默认重定向到最新版带来的行为漂移当然你也可以去掉版本号让它始终跟随最新发布。路径结构dist/dist.min.js是浏览器可直接执行的 UMD 压缩包这与 package.json 中main: dist/dist.min.js的字段声明一致也就是说 unpkg 默认入口就是该文件。附带样式库的默认样式位于dist/style.css同样可通过 unpkg 引入见下文。文档还提示可以「直接使用那个 Pen 然后在此基础上继续开发」即把官方模板 Fork 一份替换其中的数据与组件即可无需从空白画布开始。从零搭建一个可运行的 CodePen如果你不想依赖官方模板也可以自己搭建。完整的 CodePen 设置分为三步引入 React 运行时、引入 react-vis、配置 Babel 预处理器。1. 引入 React 与 ReactDOMreact-vis 基于 React 16 构建package.json 中peerDependencies声明了react与react-dom的^16.8.3所以必须先于 react-vis 加载这两个运行时。在 CodePen 的 Settings → JS 面板中添加外部脚本script srchttps://unpkg.com/react16/umd/react.production.min.js/script script srchttps://unpkg.com/react-dom16/umd/react-dom.production.min.js/script2. 引入 react-vis 浏览器包继续在 JS 面板中添加script srchttps://unpkg.com/react-vis/dist/dist.min.js/script同时在 CSS 面板引入样式样式非强制但推荐以获得网格线、坐标轴等的默认外观link relstylesheet hrefhttps://unpkg.com/react-vis/dist/style.css这种「HTML 标签直接引用」的方式同样适用于任意非 Node 环境如普通静态页面在 README.md 的 Usage 一节有完全一致的用法说明。3. 选择 Babel 预处理器CodePen 的 JS 面板需要把语言预处理器设置为Babel才能在 JS 中书写 JSX 语法。4. 编写你的第一个图表完成以上配置后在 JS 面板中输入如下代码即可渲染出一张带横向网格线的折线图const {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries} reactVis; const data [ {x: 0, y: 8}, {x: 1, y: 5}, {x: 2, y: 4}, {x: 3, y: 9}, {x: 4, y: 1}, {x: 5, y: 7} ]; ReactDOM.render( XYPlot width{300} height{300} HorizontalGridLines / LineSeries data{data} / XAxis / YAxis / /XYPlot, document.getElementById(root) );注意这里的组件来源是全局对象reactVis而非 ES Module 的import这正是浏览器构建产物暴露给全局的命名空间——该命名由 build-browser.sh 中的--standalone reactVis参数决定。5. 组件顺序决定绘制层级与 React 组件树保持一致XYPlot的子组件按书写顺序依次绘制先写的元素位于底层后写的覆盖在其上。下面这段代码把折线图放在网格线之前结果就是网格线画在折线之上视觉上可能遮住线条这一点在绘制复杂图表叠加层时尤其需要注意XYPlot width{300} height{300} LineSeries data{data} / HorizontalGridLines / XAxis / YAxis / /XYPlotreactVis 全局对象里有哪些可用组件在浏览器环境下dist.min.js会把库的所有导出挂在全局reactVis上。从 src/index.js 的导出清单可以确认你可以在 CodePen 中直接使用的组件包括坐标轴与网格XAxis、YAxis、VerticalGridLines、HorizontalGridLines、CircularGridLines、DecorativeAxis正交坐标系列LineSeries、AreaSeries、MarkSeries、LineMarkSeries、BarSeries含水平/垂直、矩形等变体、HeatmapSeries、HexbinSeries、ContourSeries、CustomSVGSeries、WhiskerSeries、PolygonSeries、RectSeries、LabelSeries以及对应的 Canvas 系列如LineSeriesCanvas、MarkSeriesCanvas复合图表RadialChart饼图/环形图、RadarChart、Sankey、Sunburst、Treemap、ParallelCoordinates交互与辅助Crosshair十字准星、Hint提示框、Highlight高亮选区、Voronoi、Borders、ChartLabel、GradientDefs、ContentClipPath图例ContinuousColorLegend、ContinuousSizeLegend、DiscreteColorLegend、SearchableDiscreteColorLegend工具函数AxisUtils、ScaleUtils以及弹性尺寸封装makeVisFlexible、makeWidthFlexible、makeHeightFlexible和对应的FlexibleXYPlot等例如改用散点图只需把系列组件替换为MarkSeries其余代码保持不变const {XYPlot, MarkSeries} reactVis; ReactDOM.render( XYPlot width{300} height{300} MarkSeries data{data} / /XYPlot, document.getElementById(root) );dist.min.js 是如何构建出来的理解dist.min.js的来源有助于你判断在 CodePen 中使用它的行为边界。根据 build-browser.sh 的实现该文件由以下流程产出遍历node_modules下所有d3-*库读取其unpkg字段并临时改写main入口确保 browserify 打包时使用各 d3 库的浏览器专用构建执行browserify src/index.js -t babelify --standalone reactVis | uglifyjs把整个库压缩成一个 UMD 包并输出到dist/dist.min.js打包完成后恢复 d3 库的main字段。其中--standalone reactVis就是「浏览器环境中出现全局变量reactVis」的直接原因。整个构建命令由 package.json 中的build脚本串联babel转译 node-sass压缩样式 build:browser这说明 CDN 包与 npm 包是同一套源码的两种分发形态。在 CodePen 之外npm 安装方式的对比CodePen 方式适合快速验证但进入真实项目后官方文档installing-react-vis.md、getting-started.md推荐切换为 npm 工程化安装npm install react-vis或使用 yarnyarn add react-vis安装后即可用 ES Module 语法按需导入组件与样式参见 getting-started.md 中的完整App.js示例import {XYPlot, LineSeries} from react-vis; import react-vis/dist/style.css;两种方式的取舍总结维度CodePen unpkg CDNnpm 安装前置条件浏览器 网络零安装Node 环境 npm/yarn组件引用全局对象reactVis.xxximport {xxx} from react-vis样式引入link指向dist/style.css导入react-vis/dist/style.css或按需import子样式详见 README.md适合场景快速原型、问题复现、教程演示正式业务项目、需要 tree-shaking 与构建优化的场景注意事项与限制库已停止维护react-vis 目前处于无活跃维护者的弃用状态见 DEPRECATED.md不会再有补丁或新特性。本文介绍的 CDN 用法在现有版本上可正常工作但新项目建议评估其他仍在维护的可视化方案。版本锁定在 unpkg URL 中显式写出版本号如1.6.7可以避免未来行为变化更稳妥的写法是固定到当前 package.json 所标注的1.12.1。ES6 兼容性react-vis 内部使用了Array.prototype.find等 ES6 方法见 README.md 的 Requirements 一节如果目标浏览器过旧需要在页面中先行引入babel-polyfill否则会报Object ... has no method find之类的错误。JSX 依赖CodePen 中必须开启 Babel 预处理器否则 JSX 语法无法解析如果不想用 JSX也可以全部改用React.createElement书写。赞分享数据可视化图表库前端【免费下载链接】react-visData Visualization Components项目地址https://gitcode.com/gh_mirrors/re/react-vis点击查看免费下载相关推荐Victory 快速上手用可组合 React 组件构建交互式数据可视化Victory 快速上手用可组合 React 组件构建交互式数据可视化 Victory 是一个由可组合 React 组件构成的生态系统专为构建交互式数据可视数据可视化UI组件Victory 快速上手指南用可组合 React 组件构建交互式数据可视化Victory 快速上手指南用可组合 React 组件构建交互式数据可视化 Victory 是一个以可组合composable为核心理念的 React 数数据可视化UI组件StarRocks 快速上手通过 Iceberg Catalog 在 MinIO 上构建 Iceberg 数据湖仓StarRocks 快速上手通过 Iceberg Catalog 在 MinIO 上构建 Iceberg 数据湖仓 Apache Iceberg 是当前最流行数据库OLAP数据仓库大数据湖仓一体数据分析上一篇X-AnyLabeling 旋转框OBB标注完整指南从交互操作到角度精度配置下一篇IOPaint 模型下载被拒3 步完成 Lama 模型手动部署创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考