DocsICP FilingConsole
官方文档
首页

Flowchart

更新时间：
复制 MD 格式
产品详情
我的收藏

This topic describes the meaning of each configuration items when you select Full Flow Chart.

Chart style

A flowchart is a component that represents the relationships between things in the form of nodes and lines. It supports custom styles of nodes and lines and can display complex process relationships in visual applications in the form of nodes and lines. image.png

Style Panel image.png

  • Search Configuration: Click the Search configuration items icon imagein the upper-right corner of the Style panel. In the Search Configuration panel, enter the name of the configuration items that you want to search for and locate the configuration items. Fuzzy match is supported. For more information, see Search configuration items.

    • Size: the width and height of the widget. Unit: pixels.

    • Positioning: the x-axis and y-axis of the component. Unit: pixels. X-coordinate indicates the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate indicates the pixel distance between the upper-left corner of the widget and the upper border of the canvas.

    • Rotate: Rotate the widget by degrees.

      • Directly enter the degrees in the Rotation Angle spin box or click the plus sign (+) or minus sign (-) to increase or decrease the value in the Rotation Angle spin box.

      • Click the imageicon to flip the widget style.

      • Click the imageicon to flip the widget style.

    • Opacity: Valid values: 0 to 1. If this parameter is set to 0, the widget is hidden. If this parameter is set to 1, the widget is completely displayed. Default value: 1.

  • Node

    • Node Size: Set the width and height of the flow node to control the size of the node. Unit: px by default.

    • Node Spacing: Set the spacing between process nodes. Default value: px.

    • Click Auto Highlight: If you turn on the switch, when you preview or publish a node, all process nodes related to the node are automatically highlighted. If you turn off the switch, all process nodes unrelated to the node are automatically highlighted.

    • Non-Highlight Style: the style of the node that is not highlighted when the node is previewed or published. This option is available only if you turn on Auto Highlight.

      Parameter

      Description

      title

      The background color and font color of the title within a non-highlighted node.

      Text

      The background color and font color of the text within a non-highlighted node.

      Link line color (non-highlighted)

      The color of non-highlighted connectors.

    • Title Style: the title style of the process node.

      Parameter

      Description

      Text

      The style of the title text, including the text font, text weight, font size, and color.

      Row Height

      The row height value of the title. Unit: px by default.

      Alignment Mode

      The alignment of the title. You can select Left, Center, or Right.

      Title Background

      Click the imageor imageicon on the right to add or remove a header background. Click the imageor imageicon to configure the arrangement style of multiple title backgrounds. Click the imageicon to copy the currently selected title background configuration and add a title background with the same configuration.

      • Status Name: the value of the status name in the background of the title. The value corresponds to the status field in the data panel.

      • Background Color: the background color of the title.

    • Text Style: the style of the text in the text box of the flow node.

      Parameter

      Description

      Text

      The style of the text in the text box, including the text font, text weight, font size, and color.

      Row Height

      The line height value of the text in the text box. Unit: px by default.

      Background color

      The background color of the text box.

      Type Text

      The style of the text in the text box, including the font, weight, font size, and color of the text.

      Note

      When the content is displayed in two columns, this module sets the left type text.

  • Connection line

    Parameter

    Description

    Connection Line Type

    The type of connector in the flow chart. The type includes Bezier Curve, Line, and Right Angle.

    Connection line color

    The color of the connection line in the flowchart.

Data Sources panel image.png

Column

Description

nodes

The description of the node, which contains the following fields:

  • id: the ID of the node.

  • title: the title value of the node.

  • status: the status of the node. This parameter is consistent with the status name in the title background of the configuration panel.

  • content: the content of the node.

edges

The description of the connection line, which contains the following fields:

  • from: the start node of the connection.

  • to: the target node to which the connection line is connected.

Configure data items

Description

DataSource

You can use the code editor or visual editor to view the data fields contained in the widget. You can also modify the Data Type parameter to flexibly configure the component data.

Data Mapping

If you need to customize chart field configurations, you can set different field mapping content in the Data Mapping module and field mapping these content to the corresponding fields of the widget. This allows you to match data without modifying the fields in the data source. You can also click the imageicon to configure the field style.

Configure a filter

Turn on Filter, select an existing data filter or create a data filter, and configure a data filter script to filter data. For more information, see Manage data filters.

Data Response Result

The Data Response Result section displays widget data in real time. If the data source of the widget changes, this section displays the latest data. If the system response is delayed, you can click the imageicon on the right to view the data response result. You can also click the imageicon on the right to obtain the latest data of the widget. You can also click View Example to view an example of the response result of the current component.

Forbid Loading

If you select the check box, you will not see the loaded content during component initialization when you update the component and preview the data kanban. If you select the check box, the opposite is true. By default, the status is deselected.

Controlled Mode

If you select the check box, the component does not request data in the initialized state, and only requests data by using global variables or the method configured in Blueprint Editor. If you clear the check box, you can use automatic update to request data. By default, the status is deselected.

Auto Data Request

Select the check box to manually enter the time frequency of polling to set dynamic polling. If you clear the page, the page is not automatically updated. You need to manually refresh the page or use Blueprint Editor and global variable events to trigger a request to update data.

Advanced Panel image.png

Interaction Occurrences

Description

When a node is clicked

Turn on the switch to enable the widget interaction feature. When a node on the flowchart is clicked, a data request is triggered, a temporary variable is thrown, and different data is dynamically loaded. By default, the id, width, height, title, content, and status values in the data are displayed. For more information, see Component interaction configuration.

When you double-click a node

Turn on the switch to enable the widget interaction feature. When a node on the flowchart is double-clicked, a data request is triggered, a temporary variable is thrown, and different data is dynamically loaded. By default, the id, width, height, title, content, and status values in the data are displayed. For more information, see Component interaction configuration.

When a blank area is clicked

Turn on the switch to enable the widget interaction feature. When a flowchart node is double-clicked, a data request is triggered, a temporary variable is thrown, and different data is dynamically loaded. By default, the id and width values in the data are displayed. For more information, see Component interaction configuration.

Blueprint Interaction

  1. Click the imageicon in the upper-left corner to go to the Blueprint page.

  2. On the Layer Nodes tab, add the widget to the main canvas.

  3. View blueprint configuration parameters. image.png

    • Event

      Event

      Description

      When the interface description request is completed

      The event is triggered with the processed JSON data after a data interface request is responded and processed by a filter. For more information about specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel of the canvas editor.

      When a node is clicked

      The data of the current node is thrown when a node in the flowchart is clicked.

      When you double-click a node

      The data of the current node is thrown when a node in the flowchart is double-clicked.

      When a blank area is clicked

      Throws the data of the current node when the blank area of the flowchart is clicked.

    • Action

      Action

      Description

      Import Interface Description

      After data of a widget is processed in accordance with its drawing format, the widget is imported for redrawing. You do not need to request server data again. For more information about specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel of the canvas editor.

      Request API Description

      This action is performed to request the server data again. The data sent by an upstream data processing node or layer node is used as a parameter. For example, if the API data source is https://api.test and the data passed to the request data interface is { id: '1'}, the final request interface is https://api.test?id=1.

      Highlight Flowchart Nodes

      Highlight the current node. For more information, see the sample data. 

      {
    "id": the ID of the current node.
}

      Move

      Move a widget to a specified location. For more information, see the data example. 

          {      
      // The positioning type. to indicates absolute positioning, whereas by indicates relative positioning. The default value is to. 
        "positionType": "to",
      // The location, which is indicated by the x and y coordinates. 
      "attr": {
        "x": 0,
        "y": 0
      },
      // The animation type. 
      "animation": {
        "enable": false,
        // The animation delay. Unit: milliseconds. 
        "animationDuration": 1000,
        // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. 
        "animationEasing": "linear"
      }
    }

      Toggle Show /Show

      Toggles whether the widget is displayed or hidden. No parameters are required.

      Display

      Display the widget. For more information, see Data example. 

      {
  "animationType": "",// The animation method. Valid value: fade. If you do not set this parameter, no animation is available. 
  "animationDuration": 1000,// The animation delay. Unit: ms. 
  "animationEasing": ""// animation curve
}

      Hide

      Hide the component. For more information, see Data example. 

      {
  "animationType": "",// The animation method. Valid value: fade. If you do not set this parameter, no animation is available. 
  "animationDuration": 1000,// The animation delay. Unit: ms. 
  "animationEasing": ""// animation curve
}

      Update component configurations

      Style configurations of widgets are dynamically updated. In the Style panel, click Copy Configuration to Clipboard to obtain the configuration data of the widget. After that, change the style field for the data processing node in Blueprint Editor.

Previous：sunburst-chartsNext：Other