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

news2024/12/27 12:48:08

目录

  • 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.coloradmin.cn/o/1537906.html

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

相关文章

Kubernetes自动化配置部署

在新建工程中,使用k8s的devops服务,自动化部署项目 1、在搭建好k8s的集群中,确认已开启devops服务; 2、新建Maven项目之后,创建dockerfile、deploy和Jenkins文件 例如: Dockerfile FROM bairong.k8s.m…

数据仓库的数据处理架构Lambda和Kappa

1.数据仓库 数据仓库(Data Warehouse),简写DW。顾名思义,数据仓库是一个很大的数据存储集合,为企业分析性报告和决策支持而创建,是对多元业务数据的筛选与整合,具备一定的BI能力,主要用于企业的数据分析、数据挖掘、数据报表等方向,指导业务流程改进、监视时间、成本、…

斯坦福大学研究团队革新电机技术,助力机器人性能飞跃提升

文 | BFT机器人 在科技日新月异的今天,我们期望机器能够胜任的任务愈发复杂且多变。无论是为失去肢体的人提供动力的假肢,还是那些独立在外部世界自由穿梭的机器人,它们都需要在多种场景下展现出卓越的行动能力。 然而传统的标准电动机&…

【Java基础】了解Java安全体系JCA,使用BouncyCastle的ED25519算法生成密钥对、数据签名

文章目录 一.Java安全体系结构二.JCA和JCE三.CSP(加密服务提供程序)与Engine类1.CSP2.Engine类如何使用引擎类 四.查看当前JDK支持的算法服务提供商(Provider)五.BouncyCastle是什么六.如何使用BouncyCastle?七.bouncycastle实现ED25519工具类 一.Java安全体系结构 …

DeepLabv1网路介绍

模型创新点 在论文引言中,作者提出了目前语义分割存在的问题,并且给出了解决办法: 下采样会导致我们图像空间分辨率降低——解决办法 使用膨胀卷积 目前语义分割网络基本都是采用CNN网络作为主干网络,但是CNN网络主要适用于目标检…

获取淘宝商品评论的爬虫技术分享(已封装API,可测试)

item_review-获得淘宝商品评论 公共参数 请求地址: taobao/item_review 名称类型必须描述keyString是调用key(必须以GET方式拼接在URL中)secretString是调用密钥api_nameString是API接口名称(包括在请求地址中)[item_search,it…

鸿蒙Harmony应用开发—ArkTS-@Provide装饰器和@Consume装饰器:与后代组件双向同步

Provide和Consume,应用于与后代组件的双向数据同步,应用于状态数据在多个层级之间传递的场景。不同于上文提到的父子组件之间通过命名参数机制传递,Provide和Consume摆脱参数传递机制的束缚,实现跨层级传递。 其中Provide装饰的变…

基于python+vue文学名著分享系统的设计与实现flask-django-nodejs-php

随着世界经济信息化、全球化的到来和互联网的飞速发展,推动了各行业的改革。若想达到安全,快捷的目的,就需要拥有信息化的组织和管理模式,建立一套合理、动态的、交互友好的、高效的文学名著分享系统。当前的信息管理存在工作效率…

设计模式之单例模式解析

单例模式 1)动机 对于软件系统的某些类,无须创建多个实例,如 Windows 系统的任务管理器,重复对象会浪费系统资源。 2)概述 1.定义 确保某个类只有一个实例,而且自行实例化,并向整个系统提供…

Android Kotlin(六)协程的并发问题

书接上回:Android Kotlin知识汇总(三)Kotlin 协程 协程的并发问题 在一个协程中,循环创建10个子协程且单独运行各自Default线程中,并让每个子协程对变量 i 进行1000次自增操作。示例如下: fun main() …

Jupyter服务器端为R语言安装readr包

1.登录debian服务器 方式1.Windows10中可利用putty登录linux服务器 方式2.自从搭建了Jupyter服务器后,还可以从juypyter的终端来登录linux服务器 2.进入R语言命令行 3.安装readr包 >install.packages(‘readr’) …

使用CSS3画出一个叮当猫HTML源码

我们经常使用PS或者Flash制作动画&#xff0c;本文则介绍了如何用CSS3画出个叮当猫&#xff0c;实现过程很有趣&#xff0c;感兴趣的朋友可以参考一下 首先&#xff0c;先把HTML结构搭建好&#xff1a; <div class"wrapper"> <!--叮当猫整体--> <di…

DP动态规划入门(数字三角形、破损的楼梯、安全序列)

一、动态规划&#xff08;DP&#xff09;简介 动态规划&#xff08;Dynamic Programming&#xff0c;简称DP&#xff09;是运筹学的一个分支&#xff0c;它是一种通过将复杂问题分解成多个重叠的子问题&#xff0c;并通过子问题的解来构建整个问题的解的算法。在动态规划中&am…

2016年认证杯SPSSPRO杯数学建模D题(第一阶段)NBA是否有必要设立四分线解题全过程文档及程序

2016年认证杯SPSSPRO杯数学建模 D题 NBA是否有必要设立四分线 原题再现 NBA 联盟从 1946 年成立到今天&#xff0c;一路上经历过无数次规则上的变迁。有顺应民意、皆大欢喜的&#xff0c;比如 1973 年在技术统计中增加了抢断和盖帽数据&#xff1b;有应运而生、力挽狂澜的&am…

.NET Core 服务实现监控可观测性最佳实践

前言 本次实践主要是介绍 .Net Core 服务通过无侵入的方式接入观测云进行全面的可观测。 环境信息 系统环境&#xff1a;Kubernetes编程语言&#xff1a;.NET Core ≥ 2.1日志框架&#xff1a;Serilog探针类型&#xff1a;ddtrace 接入方案 准备工作 DataKit 部署 DataK…

软件推荐 篇三十七:安卓软件推荐IP Tools「IP工具」:全面解析网络状态与管理的必备神器

引言&#xff1a; 随着互联网的普及&#xff0c;网络已经成为我们日常生活中不可或缺的一部分。无论是工作、学习还是娱乐&#xff0c;我们都需要通过网络来进行各种操作。然而&#xff0c;网络问题的出现往往会给我们带来诸多困扰。为了更好地管理和优化网络&#xff0c;我们…

V2X技术与智能传感器的完美融合:提升城市道路安全

在科技不断创新的今天&#xff0c;城市交通领域涌现了大量新技术。有时候我们不仅仅需要独立应用这些新技术来实现交通的变革&#xff0c;更需要将它们巧妙地结合连接起来&#xff0c;以获取更高效更安全的交通环境。本文将探讨V2X技术与智能传感器的结合&#xff0c;如何在城市…

如何使用 Elasticsearch 作为向量数据库

在今天的文章中&#xff0c;我们将很快地通过 Docker 来快速地设置 Elasticsearch 及 Kibana&#xff0c;并设置 Elasticsearch 为向量搜索。 拉取 Docker 镜像 docker pull docker.elastic.co/elasticsearch/elasticsearch:8.12.2 docker pull docker.elastic.co/kibana/kiba…

python网络相册设计与实现flask-django-nodejs-php

此系统设计主要采用的是python语言来进行开发&#xff0c;采用django框架技术&#xff0c;框架分为三层&#xff0c;分别是控制层Controller&#xff0c;业务处理层Service&#xff0c;持久层dao&#xff0c;能够采用多层次管理开发&#xff0c;对于各个模块设计制作有一定的安…