【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.rhkb.cn/news/283267.html

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

相关文章

IDEA上的Scala环境搭建

Scala环境搭建 一、搭建Scala开发环境 安装Scala编译器 安装scala-2.12.10.msi 检查scala安装情况 在dos窗口输入scala,检查是否能够进入编译器。进行简单的scala命令计算 在IDEA中进行scala编码 File - Settings - Plugins - MarketPlace中搜索scala插件 安…

RabbitMQ在Java中使用 SpringBoot 从基础到高级

充分利用每一个监听者 需要充分利用每一个消费者,需要在配置文件中加上prefetch配置并设置为1 rabbitmq:listener:simple:prefetch: 1 # 每次只能获取一条消息,处理完成才能获取下一个消息创建交换机和队列 创建队列 "fanout.queue1"&…

集简云新增“文本语音转换”功能,实现智能语音交互

为丰富人工智能领域的应用集成,为用户提供更便捷和智能化的信息获取和视觉创作方式,本周集简云上线了内置应用—文本语音转换。目前支持OpenAI TTS和TTS HD模型,实现文本语音高效智能转换,也可根据你的产品或品牌创建独特的神经网…

二、SpringBoot3 配置文件

本章概要 统一配置管理概述属性配置文件使用YAML 配置文件使用批量配置文件注入多环境配置和使用 2.1 统一配置管理概述 SpringBoot工程下,进行统一的配置管理,你想设置的任何参数(端口号、项目根路径、数据库连接信息等等)都集中到一个固定…

福建科立讯通信 指挥调度管理平台 SQL注入漏洞复现(CVE-2024-2620、CVE-2024-2621)

0x01 产品简介 福建科立讯通信指挥调度管理平台是一个专门针对通信行业的管理平台。该产品旨在提供高效的指挥调度和管理解决方案,以帮助通信运营商或相关机构实现更好的运营效率和服务质量。该平台提供强大的指挥调度功能,可以实时监控和管理通信网络设备、维护人员和工作任…

如何在linux环境上部署单机ES(以8.12.2版本为例)

ES安装(以8.12.2版本为例) 首先创建好对应的文件夹然后在对应的文件夹下执行依次这些命令 1.wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-8.12.2-linux-x86_64.tar.gz 2.wget https://artifacts.elastic.co/downloads/…

【Flask】Flask项目结构初识

1.前提准备 Python版本 # python 3.8.0 # 查看Python版本 python --version 安装第三方 Flask pip install flask # 如果安装失败,可以使用 -i,指定使用国内镜像源 # 清华镜像源:https://pypi.tuna.tsinghua.edu.cn/simple/ 检查 Flask 是…

6个免费的ChatGPT网站

AI 大模型的出现给时代带来了深远的影响: 改变了产业格局:AI 大模型的发展推动了人工智能技术在各行业的广泛应用,改变了传统产业的运作方式,促进了新兴产业的崛起,如智能驾驶、医疗健康、金融科技等。提升了科学研究…

python的ITS 信息平台的设计与实现flask-django-nodejs-php

第二,陈列说明该系统实现所采用的架构、系统搭建采用的服务器、系统开发环境和使用的工具,以及系统后台采用的数据库。 最后,对系统进行全面测试,主要包括功能测试、查询性能测试、安全性能测试。 分析系统存在的不足以及将来改进…

haproxy 高可用

一 haproxy HAProxy简介 HAProxy提供高可用、负载均衡以及基于TCP和HTTP的应用代理,适合处理高负载站点的七层数据请求。类似的代理服务可以屏蔽内部真实服务器,防止内部服务器遭受攻击。 HAProxy特点和优点: 1.支持原声SSL,同时支持客户端和…

[LeetBook]【学习日记】排序算法——归并排序

主要思想 归并排序是一种分治算法,其排序过程包括分和治分是指将要排序的序列一分为二、二分为四,直到单个序列中只有一个数治是指在分完后,将每两个元素重新组合,四合为二、二合为一,最终完成排序 图片作者&#xf…

阿里云OSS分布式存储

目录 🧂1.OSS开通 🌭2.头像上传整合OSS 🚍2.1.引入依赖 🚍2.2添加配置 🚍2.3创建配置类 🚍2.4添加实现类 🚍2.5controller调用接口 🚍2.6postman测试 1.OSS开通 1.登…

Google XSS Game Level 6 通关方式

文章目录 链接:[Google XSS Game](#https://xss-game.appspot.com/)Level 6 - Follow the 🐇思路1 (当然,我使用这个方式没有成功,所以才来记录下)解法2 【最简单的解法】需要注意的一个小问题 链接&#x…

Spring异步注解@Async线程池配置

系列文章目录 文章目录 系列文章目录前言前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 从Spring3开始提供了@Async注解,该注解可以被标注在方法上,以便异步地调…

基于“云”重构“百度云盘”

这一篇文章是和上一篇连着的哟! # docker run -p 80:80 -d -v /data/owncloud/:/var/www/html owncloud 一、【安装完成】 二、【打开浏览器】 三、【回到这个熟悉的界面,掉。】 四、【上传文件】 试了可以看哇偶!!&#xff01…

Word为图表设置图注并在图表清单中自动生成

1如果需要自动插入题注,请不要自己为文件增加新的标题样式或删除自带的标题1样式 2章节大标题最好是标题1,2,3而不要设置标题一、二、三,否则图例在自动生成时会显示 图一 -1,调整起来会非常不方便 若实在要使用大写中文标题&…

Vue模块化开发步骤—遇到的问题—解决办法

目录 1.npm install webpack -g 2.npm install -g vue/cli-init 3.初始化vue项目 4.启动vue项目 Vscode初建Vue时几个需要注意的问题-CSDN博客 1.npm install webpack -g 全局安装webpack 直接命令提示符运行改指令会报错,operation not permitted 注意&#…

牛客NC101 压缩字符串(一)【简单 模拟 Java,Go,PHP】

题目 题目链接: https://www.nowcoder.com/practice/c43a0d72d29941c1b65c857d8ac9047e 思路 直接模拟参考答案Java import java.util.*;public class Solution {/*** 代码中的类名、方法名、参数名已经指定,请勿修改,直接返回方法规定的值…

Node安装,nodejs详细安装步骤

什么是nodejs? 脚本语言需要一个解析器才能运行,JavaScript是脚本语言,在不同的位置有不一样的解析器,如写入html的js语言,浏览器是它的解析器角色。而对于需要独立运行的JS,nodejs就是一个解析器。 每一种解析器都是…

【基于skyent的热更思考】

基于skyent的热更思考 skynet-inject热更原理关键源码分析热更方式拓扑图注意事项 skynet-inject热更原理 inject是一个用于动态加载 Lua 代码文件并执行其中定义的函数的功能。可以在运行时动态加载 Lua 代码文件,然后调用其中定义的函数,通过修改模块…