arrow-plotting

Chart style

Arrow plotting is a media widget that adds custom arrow elements to a dashboard or dashboard module for visual enhancement.

Style Panel

• Search Configuration: Click the Search configuration items icon in the upper-right corner of the Style panel to search for a configuration item by name. Fuzzy match is supported. For more information, see Search configuration items.

  • Size: the width and height of the widget, in pixels.

  • Positioning: the x-axis and y-axis of the component. Unit: pixels. X-coordinate is the pixel distance from the upper-left corner of the widget to the left edge of the canvas. Y-coordinate is the pixel distance from the upper-left corner of the widget to the top edge of the canvas.

  • Rotate: Rotates the widget around its center, in degrees.

    • Enter a value in the Rotation Angle spin box, or click the plus (+) or minus (-) sign to adjust it.

    • Click the icon to flip the widget style.

    • Click the icon to flip the widget style.

  • Opacity: Valid values: 0 to 1. A value of 0 hides the widget, and 1 fully displays it. Default value: 1.

• Line Style: the style of the line in the arrow plot.

  Metric	description
  Left Height Scale	Ratio of the left line endpoint to the widget border height. Valid values: 0 to 1. A larger value moves the endpoint lower.
  Right Height Scale	Ratio of the right line endpoint to the widget border height. Valid values: 0 to 1. A larger value moves the endpoint lower.
  Arc thickness	Thickness of the line arc, in pixels. Valid values: 0 to 20. A larger value produces a thicker arc.
  Linetype	Style of the line curve.
  End Shape	Shape of line endpoints. Valid values: round and butt.
  Dotted Line	Dash pattern between line endpoints.
  Animation Direction	Direction of the line animation. Valid values: left and right.
  Dotted Speed	Movement speed of the dashed line. Valid values: 0 to 300. A larger value produces faster movement.
  Fill Color	Fill color of the line. For more information, see color picker instructions.

• Arrow Style: the style of the arrow in the arrow plot.

  Metric	description
  Show Left Arrow	Turn on to show the left arrow; turn off to hide it.
  Show Right Arrow	Turn on to show the right arrow; turn off to hide it.
  Width	Width of the arrow, in pixels. Valid values: 0 to 100.
  Height	Height of the arrow, in pixels. Valid values: 0 to 100.
  Fill Color	Fill color of the arrow. For more information, see color picker instructions.

• Text Style: the style of the text in the arrow plot.

  Metric	description
  Display	Turn on to show the text; turn off to hide it.
  Text Position	Placement of the text. Valid values: Text Above and Text Below.
  Text and Line Spacing	Distance between the text and the line, in pixels. Valid values: 0 to 100.
  Animation Direction	Direction of the text animation. Valid values: Left and Right.
  Animation Interval	Duration of one text animation cycle, in seconds. Valid values: 0 to 10.
  Font size	Font size of the text.
  The color of the font. For more information, see Color setting parameters.	Font color of the text. For more information, see color picker instructions.
  Font weight	Weight of the font.
  Font	Font family. Default value: Microsoft Yahei.

Data Sources panel

Advanced Panel

This widget does not support interaction events.

Blueprint Interaction

1. Click the icon 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.

   • Event

     Event	Description
     When the data request is completed	Triggered with the processed JSON data after a data interface request is responded to and processed by a filter. For specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel of the canvas editor.

   • Action

     Action	Description
     Requests	Requests server data again. Data from 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 transferred to the request data interface is { id: '1'}, the final request interface is https://api.test?id=1.
     Import task	Imports pre-processed data to redraw the widget without requesting server data again. For specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel of the canvas editor.
     Move	Moves a widget to a specified location. See the data example for details. { // 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 duration in which animation is displayed. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }
     Switch Display /Display	Toggles widget visibility. No parameters are required.
     Display	Shows the widget. See the data example for details. { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Hide	Hides the widget. See the data example for details. { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Update component configurations	Dynamically updates widget style configurations. In the Style panel, click Copy Configuration to Clipboard to obtain the configuration data, then modify the style field in the data processing node in Blueprint Editor.