list-carousel-column-chart

Chart style

The carousel list column chart is a table widget that maps column lengths to numerical values and displays overflow text with marquee animation. It visually presents multiple rows and pages of text in your visual application.

Style Panel

• Search Configuration: Click the Search configuration items icon in the upper-right corner of the Style panel to search for and locate configuration items by name. 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: Rotates the widget around its center. Unit: 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 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 a value of 1 fully displays it. Default value: 1.

• Global Style

  Parameter	Description
  Font	The font of the widget text. Default value: Microsoft YaHei.
  Turn on animation	Enables the animation effect.
  Animation Time	The total duration of text rollover and column chart flash effects during carousel playback. Unit: ms.
  Line Spacing	The spacing between rows.
  Quantity	The number of lines of text displayed on each page.
  Automatic carousel	When enabled, the chart automatically replays after the data finishes playing. When disabled, playback stops after one cycle. Note After you enable automatic carousel, the change takes effect starting from the next carousel cycle.
  carousel time	The interval between page transitions in the list. Unit: ms.

• Sort: the sorting mode for widget data by value. You can select Descending or Ascending. Click the icon to control the display of sorting.

• Serial Number: the serial number style of the list. You can click the icon to display or hide the serial number.

  Parameter	Description
  Text	The size, color, and font weight of the serial number text.
  Width	The width of the serial number column. Unit: px or %. You must include the unit in the input value.
  Interval	The spacing between the serial number and the carousel content. Unit: px.
  Mode	The style of the serial number.

• Content

  Parameter	Description
  Text	The size, color, and font weight of the content text.
  Marquee component	Applies a marquee animation to overflow text. Click to toggle this effect.
  Animation Time	The duration of the marquee animation for overflow text. Unit: ms.

• Value: the display style of the value field in the data. You can click the icon to display or hide the value.

  Parameter	Description
  Font size	The size of the numeric text.
  Color	The color of the numeric text.
  Font weight	The font weight of the numeric text.
  Interval	The spacing between the numeric text and the content text.
  thousands separator delimiter	When enabled, a comma separator is inserted at every thousands place in the value.
  Prefix and Suffix	The prefix and suffix of the numeric value. You can customize the prefix and suffix content, and set the spacing between the value and the prefix or suffix. Unit: px.

• Column Chart: the style of the column chart. You can click the icon to display the chart.

  Parameter	Description
  Color	The color of the column chart.
  Height	The thickness of the column chart.

• Streamed: the streamer effect style in the column chart. You can click the icon to turn the streamer effect on or off.

  Parameter	Description
  Color	The color of the streamer.
  Length	The length of the streamer.
  Height	The thickness of the streamer. If the streamer exceeds the size of the column chart, the excess is not displayed.
  Animation Interval	The interval between streamer animation cycles. Unit: ms.

• line separator: the line separator style between rows. Click to toggle the line separator display.

  Parameter	Description
  Color	The color of the line separator.
  Height	The thickness of the line separator.

Data Sources panel

Advanced Panel

No global variable events are associated with this widget.

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	Notes
     When the data interface 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	Notes
     Import data	Imports pre-processed data in the widget drawing format for redrawing without re-requesting server data. For more information, see the data example. [ { "value": 1, "content": "The scientific name of the pie chart is Sector Graph, also known as Pie Graph. " } ]
     Request Data Interface	Requests server data again, using data sent by an upstream data processing node or layer node as parameters. 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.
     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" } }
     Switch Display /Display	Toggles widget visibility. 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	Dynamically updates widget style configurations. In the Style panel, click Copy Configuration to Clipboard to obtain the configuration data. Then, modify the style field for the data processing node in Blueprint Editor.