MindFusion教程:在 React 中使用 Flexbox 布局排列图表组件

翻译|使用教程|编辑:杨鹏连|2021-06-17 11:11:29.140|阅读 53 次

概述:本教程演示了如何使用 flexbox 布局来排列 React 图表库附带的各种图表控件。我们将安排的控件是 DiagramView 、NodeListView、Ruler、Overview、Zoomer和Ruler。

# 31款JAVA开发必备控件和工具 # 开发软/控件产品年终优惠

MindFusion.Diagramming for WinForms是一个能帮助你创建工作流和进程图表的.NET控件;数据库实体关系图表;组织图表;对象层次和关系图表;图表和树。它是基于对象-图表框,表格和箭头类型,将其归类分派给其他并结合成复杂的结构。该控件提供超过预先定义的50多种图表框,如自定义设计样式和对图表框着色等。MindFusion.Diagramming for WinForms现已加入在线订购,Standard Single Developer版本原价2848现在抢购立享优惠只需2345,立即查看详情>>

点击下载MindFusion.Diagramming for WinForms最新试用版

本教程演示了如何使用 flexbox 布局来排列 React 图表库附带的各种图表控件。我们将安排的控件是 DiagramView 、NodeListView、Ruler、Overview、Zoomer和Ruler。这是最终应用程序的屏幕截图:

我们使用可从https://www.npmjs.com/package/diagram-library-react获得的 React 框架和 MindFusion 图库构建我们的项目。

一、初始项目设置

我们打开一个终端并导航到我们要创建应用程序的文件夹。我们使用 create-react-app 来初始化一个空的 React 应用程序:

npx create-react-app flex-diagram
正如您一样,我们将应用程序命名为 flex-diagram。初始 React 设置完成后,我们安装图表:
npm install diagram-library-react
一旦我们完成了,我们就可以开始编写我们的应用程序了。我们添加一个新的 JavaScript 文件,我们将其命名为 DiagramApp.js。在其中我们首先导入默认的 React 命名空间并声明 Component 类的成员导入。然后我们在名称“mf”下声明 MindFuson 图表库的默认导入。最后,我们声明我们打算使用的控件类的成员导入:DiagramView、Overview、NodeListView、ZoomControl 和 Ruler:
import React, { Component } from 'react';
import mf from 'diagram-library';
import { DiagramView, Overview, NodeListView, ZoomControl, Ruler } from 'diagram-library-react';
然后我们可以创建我们的类 DagramApp,它扩展了组件。我们需要一个构造函数,所以我们声明一个。在其中我们创建了一个Diagram类的实例,它代表了图表。请注意,这不是用于呈现图表的 React 类的 DiagramView。这是交互式图表,实际上是由DiagramView 渲染的。
class DiagramApp extends Component {
  constructor(props) {
    super(props);

    // create the diagram
    var diagram = new mf.Diagramming.Diagram();
    ...........................
然后我们创建一个ShapeNode实例数组,它将被NodeListView控件使用。同样,NodeListView是一个呈现节点的 UI 组件,但它不会创建它们。它们作为参数提供给它。
var nodes = [];
    var shapes = ["Actor", "RoundRect", "Triangle", "Decision"];
    for (var i = 0; i < shapes.length; ++i) {
      var node = new mf.Diagramming.ShapeNode(diagram);
      node.setText(shapes[i]);
      node.setShape(shapes[i]);

      nodes.push(node);
 }
我们仅使用ShapeNode -s的 id-s 创建一个数组,我们也将其用作它们的标签。您可以在https://www.mindfusion.eu/onlinehelp/jsdiagram/index.htm?CC_refTable_of_Predefined_Shapes_4.htm检查可用的预定义ShapeNode -s的 id-s 。

最后,我们需要在 React 状态中存储图表,以及节点和形状 id-s。当我们为我们的应用程序创建 HTML 时,我们将需要它们。在 React 中,访问类变量的方式是将它们存储在状态中。

    this.state = {
      diagram: diagram,
      nodes: nodes,
      captions: shapes
    };
二、使用 CSS 和 Flexbox 布局排列 UI

我们的 flexbox 布局具有以下结构:

我们用不同的颜色对页面的不同区域进行了着色,以向您展示 flexbox 布局中的部分。主容器占用 100% 的空间,例如整个页面。我们将其高度固定为至少 500px。flexbox 的布局是 row without wrap,这意味着元素不会通过调整大小重新排列成几行。这正是我们所需要的。这是容器样式的代码:
.container{
  display: flex;
  flex: 1 1 100%;
  min-height: 500px;
  flex-flow: row nowrap;
  background-color: azure;
  }
容器中的第一项是我们要将概览和NodeListView控件放在一起的垂直列。此列需要保持固定大小。当用户调整页面大小时,我们不希望它调整大小。当可用空间发生变化时,必须调整中间的图表。我们称该列为“left-sidebar”并将其“flex-flow”设置为 column。如果可用空间太短,我们再次使用 no wrap 来停止将两个控件并排放置的布局。我们还将此元素的宽度固定为 200 像素,这很适合我们的控件。
.left-sidebar{
  flex: 0 0 200px;
  display: flex;
  flex-flow: column nowrap;
  background-color: beige;
  }
我们希望概览和NodeListView控件占用空间的方式有所不同。概览需要固定的空间。我们希望为 NodeListView 提供额外的空间。这就是为什么我们再添加一种样式来应用它:
.item {
  align-self: stretch;
  background-color:lightpink;
  flex: 1 1 300px;  
  }
我们将 1 作为 flex-grow 和 flex-shrink 的值,表示我们希望调整此元素的大小,而不是右列中的其他项目。

我们现在准备处理中间的图表。在这里,重要的是要指出该元素将伸展以占据所有可用位置。而且,当空间变小时,必须收缩的就是这个项目:

.center-area {
     align-self: stretch;
     background-color:chartreuse;
     flex: 10 10 500px;
     max-height: 800px;
     overflow: hidden;
}
我们为 flex-grow 和 'flex-shrink' 属性设置大值,并将 flex-basis 设置为 500 像素。我们必须将图表的高度限制为 800 像素,因为它可能会变得很长。'align-self' 的重要属性,它应用于由 flexbox 容器排列的项目,而不是容器本身。在这里,我们使用此属性告诉图表在空间可用时自行拉伸。隐藏溢出属性以避免在大图中呈现不必要的滚动条。

最后,右侧边栏将托管缩放控件。它类似于左侧边栏,但它没有像 NodeListView 这样的“特殊”项。Zoom 控件是一个固定大小的 UI 控件,不需要特殊处理。如果窗口太大,我们只需要确保没有额外的空间被转移到它上面:

.right-sidebar{
  flex: 0 0 50px;
  background-color: lavender;  
  }
这是我们需要定义的最后一个元素的最后一个样式。现在我们准备将这些样式应用到真正的 React 组件并安排它们。

三、“渲染”方法

我们在新的 DiagramApp React 组件的 'render' 方法中声明的第一件事是一些属性:

 var props = {
      "id": "diagram1",
      "linkHeadShapeSize": 2,
      "routeLinks": true,
      "roundedLinks": true,
      "backBrush": "#e0e9e9"
    };
这些是Diagram实例的属性,我们将通过 JavaScrpt 展开运算符提供它们。然后在 return 语句中我们首先声明容器 div 元素。它的风格是“容器”。在其中我们声明了左侧边栏,它将包含概览和 NodeListView。我们也声明它们:
return (      

        <div className="container">
         
            <div className="left-sidebar">
           
              <Overview diagram={this.state.diagram}></Overview>  
  <NodeListView className="item" 
                nodes={this.state.nodes}
                captions={this.state.captions}
              ></NodeListView>        
             
             
            </div>            

        </div>      

    );
该概述被绑定到图中,我们坚持国家目标。该NodeListView需要与节点和标题列表,如果我们要加强对节点字幕。我们想要并且我们已经将节点和标题存储在状态中。

之后轮到图表。它将占据中心区域,它的类是“中心区域”。除了图表之外,我们还将使用标尺控件。我们首先放置它并将图表嵌套在其中。我们使用扩展运算符将属性分配给图表,我们在方法开始时初始化了这些属性。

<div className="center-area">              
            <Ruler style={{ width: "100%", height:"800px" }}>
                <DiagramView diagram={this.state.diagram} 
                  {...props}
                  />
            </Ruler>
            </div>
最后,我们声明右侧边栏,其中包含缩放控件。Zoom 控件还需要绑定到一个图表实例,我们使用 state 来获取对我们图表的引用:
          <div className="right-sidebar">
          <ZoomControl diagram={this.state.diagram}></ZoomControl>        
        </div>
这样我们的组件就准备好了。我们只需要将它放在 index.js 而不是默认的 App 组件中:
import DiagramApp from './DiagramApp';

ReactDOM.render(
 
    ,
  document.getElementById('root')
);
我们可以用
npm start
然后您可以在本地主机的端口 3000 上看到您的应用程序。
您可以从此链接下载结构为 npm 项目的完整代码:

下载完整源代码

对于技术问题,请使用 JS Diagram 论坛:https : //mindfusion.eu/Forum/YaBB.pl?board=jsdiag_disc

关于 JavaScript 图表:这个原生 JavaScript 库使开发人员能够创建和自定义任何类型的图表、决策树、流程图、类层次结构、图形、谱系树、BPMN 图等等。该控件提供丰富的事件集、众多自定义选项、动画、图形操作、样式和主题。您有 100 多个预定义节点、表节点和 15 多种自动布局算法。在https://mindfusion.eu/javascript-diagram.html 上了解有关 JavaScript 图表的更多信息。


想要购买该产品正版授权请点击【商城购买】,想了解更多产品信息请点击【咨询在线客服】


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至hey@evget.com

文章转载自:MindFusion

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关产品
MindFusion.Diagramming for WinForms

FlowChart.NET是一款能够帮助你轻松创建流程图和示意图的.NET控件,可以自定义设计样式和图表框颜色。

MindFusion.Reporting for WinForms

原生的Windows Forms编程组件,可为任何.NET应用程序提供专业的报表功能

title
title
在线咨询
联系我们
TOP
在线客服系统
live chat