【ReactJS】使用GoJS实现自己的图表App

目录

  • 1:用于绘制自定义图表的JavaScript库:
    • 用于绘制UML(或BPMN或ERD …)图表的JavaScript库:
  • 2:为什么选择GoJS?
  • 3:让我们使用现有的React应用程序:
    • 步骤1:
    • 步骤2:
    • 步骤3:
    • 步骤4:

推荐超级课程:

  • Docker快速入门到精通
  • Kubernetes入门到大师通关课
  • AWS云服务快速入门实战

在这里插入图片描述

1:用于绘制自定义图表的JavaScript库:

用于绘制UML(或BPMN或ERD …)图表的JavaScript库:

  • . JointJS
  • . Rappid
  • . MxGraph
  • . GoJS
  • . jsUML2库
  • . Mindfusion Diagram库
  • . Nomnoml
  • . Mermaid.js
  • . Diagram.js
  • . State.js

在本帖中,我将介绍GoJS。😉

2:为什么选择GoJS?

GoJS是一个功能丰富的JavaScript库,用于在现代浏览器和平台上实现交互式图表。
GoJS通过可定制的模板和布局使构建复杂节点、链接和组的图表变得简单。

GoJS提供许多高级功能,用于用户交互,如拖放、复制粘贴、事务状态和撤销管理、色板、概览、数据绑定模型、事件处理程序,
以及用于自定义操作的可扩展工具系统。
他们提供了150多个交互示例来帮助您开始使用BPMN、流程图、状态图、可视化树、Sankey和数据流等图表。
API文档非常完善,确保您可以立即开始使用它。

3:让我们使用现有的React应用程序:

步骤1:

安装:
首先安装GoJS和gojs-react:

npm install gojs gojs-react

导入:

import * 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/764366.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

git创建仓库、克隆、拉取、上传、历史等常见操作集锦

本地工作目录、暂存区、本地仓库和远程仓库 workspace工作区:本地项目地址index/stage暂存区:git add .将工作区内容加入到了暂存区repository本地仓库:在本地存储多个版本的文件,也称为版本库。其中有一个head指针指向最新放入仓库的文件版本,git commit -m "描述你…

[医学分割大模型系列] (1) SAM 分割大模型解析

[医学大模型系列] [1] SAM 分割大模型解析 1. 特点2. 网络结构2.1 Image encoder2.2 Prompt encoder2.3 Mask decoder 3. 数据引擎4. 讨论 论文地址:Segment Anything 开源地址:https://github.com/facebookresearch/segment-anything demo地址&#x…

C#,图片分层(Layer Bitmap)绘制,反色、高斯模糊及凹凸贴图等处理的高速算法与源程序

1 图像反色Invert 对图像处理的过程中会遇到一些场景需要将图片反色,反色就是取像素的互补色,比如当前像素是0X00FFFF,对其取反色就是0XFFFFFF – 0X00FFFF = 0XFF0000,依次对图像中的每个像素这样做,最后得到的就是原始2 图像的反色。 2 高斯模糊(Gauss Blur)算法 …

cesium知识点:坐标系

一,地理坐标系 1.经纬度坐标系 对象:没有实际的对象 说明:cesium默认使用WGS84坐标系作为空间参考,坐标原点在椭球的质心。 2.弧度坐标系(Cartographic) 对象:new Cesium.Cartographic(longitude, latitude, heigh…

easyExcel大数据量导出oom

easyExcel大数据量导出 异常信息 com.alibaba.excel.exception.ExcelGenerateException: java.lang.OutOfMemoryError: GC overhead limit exceededat com.alibaba.excel.write.ExcelBuilderImpl.fill(ExcelBuilderImpl.java:84)at com.alibaba.excel.ExcelWriter.fill(Excel…

AI智能分析网关V4养老院视频智能监控方案

随着科技的快速发展,智能监控技术已经广泛应用于各个领域,尤其在养老院这一特定场景中,智能监控方案更是发挥着不可或缺的作用。尤其是伴随着社会老龄化趋势的加剧,养老院的安全管理问题也日益凸显。为了确保老人的生活安全&#…

yarn安装包时报错error Error: certificate has expired

安装教程: 配置镜像地址: npm config set registry https://registry.npmmirror.com//镜像:https://developer.aliyun.com/mirror/NPM 安装yarn: npm install --global yarn查看版本: yarn --version卸载&#xff…

每日五道java面试题之springboot篇(一)

目录: 第一题. 什么是 Spring Boot?第二题. Spring Boot 有哪些优点?第三题. Spring Boot 的核心注解是哪个?它主要由哪几个注解组成的?第四题. 什么是 JavaConfig?第五题. Spring Boot 自动配置原理是什么…

ChatGPTGPT4科研应用、数据分析与机器学习、论文高效写作、AI绘图技术教程

原文链接:ChatGPTGPT4科研应用、数据分析与机器学习、论文高效写作、AI绘图技术教程https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247598506&idx2&sn14f96667bfbeba5f51366a1f019e3d64&chksmfa82004dcdf5895bba2784ba10f6715f6f5e4c59c9b1…

【MySQL】3.2MySQL事务和存储引擎

MySQL事务 一、MySQL事物的概念 事务是一种机制,包含了一件事的完整的一个过程 ●事务是一种机制、一个操作序列,包含了一组数据库操作命令,并且把所有的命令作为一个整体一起向系统提交或撤销操作请求,即这一组数据库命令要么…

后端项目中构建前端模块问题记录

后端项目中在登陆页面使用jsp,后端项目会通过接口返回给前端几个js的路径,这几个js呢,是由后端先构建好,然后返回给前端路径的,前端通过这个路径访问js执行。。。 总之,很奇怪的项目。。 1、首先要安装no…

JSqlParser的使用

简介 JSqlParse是一款很精简的sql解析工具,它可以将常用的sql文本解析成具有层级结构的语法树,我们可以针对解析后的节点进行处理(增加、移除、修改等操作),从而生成符合我们业务要求的sql,比如添加过滤条件等等 JSqlParse采用访问者模式 项…

全智能深度演进,一键成片让视频创作颠覆式提效

全智能一键成片,让内容创作的「边际成本」逼近于零。 大模型和AIGC技术的发展,可以用“日新月异”来形容,其迭代速度史无前例,涌现出的各类垂直应用模型,也使得音视频行业的应用场景更加广泛和多样化。 然而&#xff…

如何从零开始拆解uni-app开发的vue项目(三)

前言:前两篇文章我们讲解了如何拆解uni-app开发的项目结构、实现前台数据的动态加载,今天讲一篇如何实现动态加载功能列表,以及美化界面。话不多说,直接先看源码: 在用户成功登录后,会跳转到menu.vue菜单, 再次点击点检功能时,会进入点检的具体功能跳转菜单,我们的点…

在Linux/Debian/Ubuntu上通过 Azure Data Studio 管理 SQL Server 2019

Microsoft 提供 Azure Data Studio,这是一种可在 Linux、macOS 和 Windows 上运行的跨平台数据库工具。 它提供与 SSMS 类似的功能,包括查询、脚本编写和可视化数据。 要在 Ubuntu 上安装 Azure Data Studio,可以按照以下步骤操作&#xff1…

Sphinx + Readthedocs 避坑速通指南

博主在学习使用 Sphinx 和 Read the docs 的过程中, 碰到了许多奇葩的 bug, 使得很简单的任务花费了很长的时间才解决,现在在这里做一个分享,帮助大家用更少的时间高效上线文档的内容。 总的来说, 任务分为两个部分: …

UE5制作推箱子动作时获取物体与角色朝向的角度及跨蓝图修改变量

就是脑残死磕,你们如果有更好的方法一定要留言啊~~独乐乐不如众乐乐。 做推箱子的时候需要考虑脸是不是面对着箱子,不是必须90度,可以有一个-45~45度的范围。 摸索了一下,有几种做法和几个小白坑,这里列出来。 一、准…

mysql 索引原理为什么用b+树而不用二叉树

在数据库中,索引是一种数据结构,它能够快速定位到存储在数据库表中特定行的数据。MySQL等数据库管理系统通常使用B树作为索引的数据结构,而不使用二叉树,主要基于以下几个原因: 高度平衡:B树是一种多路搜索…

软件推荐 篇三十七:开源免费无广告的在线音乐免费播放 | MusicFree纯净无广告体验-小众冷门推荐

引言 自从QQ音乐没了杰伦、某云开始收费,除了各种广告弹窗导致电脑卡的要死,打工人就靠这点音乐背景熬夜了,木有办法,得有个开源免费的听歌软件吧,一搜github,软件一大堆,作为一个打工仔&#…