trapezoidal-column-chart

Chart style

A trapezoidal bar chart is a type of bar chart that clearly displays data differences between and within categories, though it occupies a large space in the data dashboard. It supports custom y-axis intervals, multi-series data configurations, and automatic grouping based on data categories.

Style Panel

• Search Configuration: Click the Search configuration items icon in 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 coordinates of the widget. Unit: pixels. X-coordinate is the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate is the pixel distance between the upper-left corner of the widget and the upper border of the canvas.

• Rotate: The rotation angle of the widget around its center. Unit: degrees.

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

  • 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. A value of 1 fully displays the widget. Default value: 1.

• Chart name

  • Margin: The distance between the chart area and the four boundaries of the widget. Default value: px.

  • Maximum Load: The maximum number of data records to load. The system loads up to this number of records for layout, drawing, and computing to ensure visual application performance.

  • column chart Style: The style of each column in the chart.

    Foot Tilt: The tilt range of the foot of the trapezoidal column.

  • Value Label: The style of the value label for each column. You can click the icon to display or hide the value label.

    Parameter	Description
    Text	The font style, text weight, font size, and color of the value label text.
    Location	The position of the value label text. Valid values: Top, Middle, and Bottom.
    Nullable data	If turned on, value labels are displayed even when data is empty. If turned off, value labels are hidden for empty data.

  • Legend: The legend style of the chart. You can click the icon to display or hide the legend.

    Parameter	Description
    Text	The font style, text weight, font size, and color of the legend text.
    Layout	The layout of the legends. Spacing Left and Right Spacing: The horizontal distance between adjacent legends. This setting only takes effect when multiple series exist. Distance: The distance between the legend and the upper and lower boundaries of the widget and chart area. Position: The position of the legend relative to the start coordinates of the widget. Valid values: Top Left, Top Center, Top Right, Bottom Left, Bottom Center, and Bottom Right.

• Axis: You can select x-axis or y-axis.

  • X Axis

    • X Axis Visible: If turned on, the x-axis is visible. If turned off, the x-axis is hidden.

    • White Space: The padding on the left and right sides of the x-axis. Valid values: 0 to 1.

    • interval: The gap between columns on the x-axis. A larger value produces thinner columns with wider gaps. Valid values: 0 to 0.95.

    • Axis Label: The style of the x-axis label. You can click the icon to display or hide the x-axis label.

      Parameter	Description
      Text	The font style, text weight, font size, and color of the axis label text.
      Axis Label Display	Angle: The angle of the axis label. Valid values: Horizontal, Tilt, or Vertical. Quantity: The number of x-axis labels. Axis Unit: The unit of the axis label.

    • Axis: The style of the x-axis. You can click the icon to display the x-axis.

      Color: The color of the x-axis.

    • Gridlines: The style of the x-axis gridlines. You can click the icon to display or hide the x-axis gridlines.

      Color: The color of the x-axis gridlines.

  • Y-axis

    • Y Axis Visible: If turned on, the y-axis is visible. If turned off, the y-axis is hidden.

    • Range: The minimum and maximum value range of the y-axis.

      Parameter	Description
      Minimum Runtime Duration	The minimum value of the y-axis. You can enter a custom value or select from the following options. Automatic Rounding: Automatically calculates the maximum value, minimum value, and the number of metric points based on the data. Minimum Data Value: The minimum value in the data.
      Maximum Runtime Duration	The maximum value of the y-axis. You can enter a custom value or select from the following options. Automatic Rounding: Automatically calculates the maximum value, minimum value, and the number of metric points based on the data. Maximum Data Value: The maximum value in the data.

    • Axis Label: The style of the y-axis label. You can click the icon to display or hide the y-axis label.

      Item	Example value
      Display Format	The display format of the y-axis label value. Valid values: Default, 11 (integer), 11.1 (floating-point), 11.11 (floating-point), 11%, 11.1%, and 11.11%. For more information about data display formats, see Data display formats.
      Text	The font style, text weight, font size, and color of the axis label text.
      Axis Label Display	The quantity and unit settings for axis labels.

    • Axis: The style of the y-axis. You can click the icon to display the y-axis.

      Color: The color of the y-axis.

    • Gridlines: The style of the y-axis gridlines. You can click the icon to display or hide the y-axis gridlines.

      Color: The color of the y-axis gridlines.

• Edition

  data series: Click the or icon on the right to add or delete a data series. Click the or icon to configure the arrangement style of multiple data series. Click the icon to copy the selected data series configurations and add a data series with the same configurations.

  Parameter	Description
  Series Name	The name of the data series, which you can customize. If not specified, the system uses the value of the s field in the component data as the series name. If specified, you must ensure the order in which data is returned.
  Color	The color of the columns in this series.

• Remarks

  • Eased Animation: The animation effect of the bar chart. You can click the icon to enable or disable the animation effect.

    Parameter	Description
    Animation Settings	Eases: The easing effect of the animation. Multiple common easing effects are available. Sequential animation of each series: If turned on, each series plays the animation in sequence. If turned off, all columns play the animation together.
    Admission Animation	The duration of the initial animation when the widget first renders. Unit: ms.
    Update Animation	Update Animation Duration: The duration of the animation when the widget data is updated. Unit: ms. Start From Previous Position: If turned on, the animation starts from the previous position when data is updated. If turned off, the animation starts from the initial position.

  • dialog box: The style of the tooltip that appears when you hover over or click a column on the preview or publish page. Click the icon to turn the tooltip on or off.

    Parameter	Description
    Disappearing Delay Time	The delay before the tooltip disappears after the trigger condition is no longer met. Unit: ms.
    Trigger	Trigger Type: The type of target that triggers the tooltip. Valid values: Data Item and Axis. Trigger Action: The action that triggers the tooltip. Valid values: Hover and Click.
    Text Style	The text style of the tooltip, including font style, weight, font size, and color.
    Background Box Style	The background style of the tooltip. Background Color: The background color of the tooltip. Custom: The custom width and height of the tooltip. Unit: pixels. Click the icon to turn custom tooltip sizing on or off. Pin: The inner padding of the tooltip. Unit: pixels. Offset Horizontal Offset: The horizontal offset of the tooltip relative to the mouse pointer. Unit: px. Vertical Offset: The vertical offset of the tooltip relative to the mouse pointer. Unit: px. Borders Border Size: The border size of the tooltip. Unit: pixels. Border Color: The border color of the tooltip.

Data Sources panel

Advanced Panel

When you click a data item: Turn on the switch to enable widget interaction. When you click a column of the trapezoidal bar chart, a data request is triggered and a variable is emitted to dynamically load data for different columns. By default, the x, y, and s values in the data are available. For more information, see Component interaction configuration.

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 ladder bar 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.
     When a data item is clicked	Triggered when a column of the trapezoidal bar chart is clicked. The corresponding data item is emitted along with the event.

   • Action

     Action	Description
     Import Ladder Histogram Interface	Imports pre-processed data in the widget's drawing format for redrawing, 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.
     Request a ladder histogram	Requests server data again, using data from an upstream data processing node or layer node as parameters. For example, if the API data source for a trapezoidal bar chart is https://api.test and the data passed to the request ladder histogram interface is { id: '1'}, the final request URL is https://api.test?id=1.
     Highlight	The data item to be highlighted. { x: 'Inner mongolia' } Reference data example { "data": {}, "options": {} }
     Unhighlight	The data item to unhighlight. If the data field is not specified, all highlighted data is unhighlighted. { x: 'Inner mongolic' } Reference data example { "data": {}, "options": {} }
     Clear components	Clears widget data. No parameters are required.
     Move	Moves the widget to a specified location. See the data example below. { // 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 Display	Toggles widget visibility. No parameters are required.
     Display	Displays the widget. See the data example below. { "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 below. { "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 widget's configuration data, then modify the style field for the data processing node in Blueprint Editor.