简介
flowchat-map-i18n 是一个 Web 前端组件库，用于在业务流程图上展示国际化信息。该库基于 jQuery 和 SVG，支持 TypeScript，可运行于现代浏览器。
安装
使用 npm 安装
npm install flowchat-map-i18n --save
使用 CDN 引入
<script src="https://cdn.jsdelivr.net/npm/flowchat-map-i18n/dist/flowchat-map-i18n.js"></script>
快速上手
引入库文件
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------ ------------
------- ----------------------------------------------------------------------
------- ----------------------------------------------------------------------------------------
-------
------
---- ---------------------
--------
-- -------
----- ---- - -
------ -
- --- ---- ------ --- --- -- ---- -- -- --
- --- ---- ------ --- --- -- ---- -- -- --
- --- ---- ------ --- --- -- ---- -- -- --
--
------ -
- --- ------ ------- ---- ------- ---- ------ --- ---- --
- --- ------ ------- ---- ------- ---- ------ --- ---- --
--
--
-- -------
----- --- - --- ----------------------------------------------------- ------
-- -------
----------------- -
--- --- ------ ---
--- --- ------ ---
--- --- ------ ---
--- ----- -------- -----
--- ----- -------- -----
---
----------------- -
--- --- --- ---
--- --- --- ---
--- --- --- ---
--- ----- --- -----
--- ----- --- -----
---
-- ----
----- ---------- - ---------------------------------
----- ----- - ------ ------
--- ------ ---- -- ------ -
----- ------ - ---------------------------------
------------ - -----
----------- - -----
-------------------------------
-
---------------- - -----
------------------------------------- -- -- -
----- ---- - -----------------
------------------
---
-------------------------------------- --------------------------
---------
-------
-------效果演示
API
FlowchatMapI18n 构造函数
new FlowchatMapI18n(container: HTMLElement, data: { nodes: FlowchatNode[], edges: FlowchatEdge[] }, options?: FlowchatMapI18nOptions)container: 用于渲染流程图的容器元素。data: 流程图数据，包含节点和边的数组。options.language(可选): 默认显示的语言，可选值为'en'和'zh'，默认为'en'。options.nodeRadius(可选): 节点圆角半径，单位为像素，默认为5。options.nodeWidth(可选): 节点宽度，单位为像素，默认为100。options.nodeHeight(可选): 节点高度，单位为像素，默认为60。options.nodeTextColor(可选): 节点文字颜色，默认为'#fff'。options.nodeStrokeWidth(可选): 节点边框宽度，单位为像素，默认为1。options.nodeStrokeColor(可选): 节点边框颜色，默认为'#1890ff'。options.nodeFillColor(可选): 节点背景颜色，默认为'#1890ff'。options.nodeSelectedStrokeWidth(可选): 选择节点时的边框宽度，单位为像素，默认为2。options.nodeSelectedStrokeColor(可选): 选择节点时的边框颜色，默认为'#1890ff'。options.edgeTextColor(可选): 边文字颜色，默认为'#969696'。options.edgeStrokeWidth(可选): 边宽度，单位为像素，默认为1。options.edgeStrokeColor(可选): 边颜色，默认为'#1890ff'。options.edgeSelectedStrokeWidth(可选): 选择边时的宽度，单位为像素，默认为2。options.edgeSelectedStrokeColor(可选): 选择边时的颜色，默认为'#1890ff'。
FlowchartMapI18n 实例方法
map.addI18n(language: string, i18n: { [name: string]: string })language: 语言标识，例如'en'或'zh'。i18n: 国际化信息，对象类型，将流程图中的节点和边的标签映射为对应语言的文本。
map.setI18n(language: string)
language: 语言标识，例如'en'或'zh'。
FlowchatMapI18n 静态方法
FlowchartMapI18n.parse(data: string): { nodes: FlowchartNode[], edges: FlowchartEdge[] }data: 流程图数据，字符串类型，符合 flowchart.js 的语法。- 返回值: 对象类型，包含节点和边的数组。
结语
通过本文的介绍，我们学习了 flowchart-map-i18n 这个 npm 包的使用方法，以及 API 的详细说明。希望读者能够通过代码实践，更深入地理解该库的设计思路和使用场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb181e8991b448dc52c