stripe-column-chart

Chart style

A zebra column chart is a type of column chart. Unlike a basic column chart, a zebra column chart uses discontinuous, configurable lines to display multi-dimensional data differences more clearly, but occupies more space in visualization applications.

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 item to locate it. 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: The widget is rotated around the center of the widget. Unit: degrees.

  • Directly 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 column chart area and the four boundaries of the widget. Default value: px.

  • Maximum Load: The maximum number of input data records loaded for layout, drawing, and computing to ensure application performance.

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

    Line: The thickness of each small horizontal line (zebra stripe) and the distance between the lines.

  • Value Label: the style of the value label for each column. Click the icon to show 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. You can select Top, Middle, or Bottom.
    Null data	If you turn on the switch, the value tag data is still displayed in the widget column. If you turn off the switch, the value tag data is not displayed.

  • Legend: the legend style of the column chart. Click the icon to show or hide the legend.

    Parameter	Description
    Text	The font style, text weight, font size, and color of the legend text.
    Layout	The positional relationship between the legends. Spacing Left and Right Spacing: The horizontal distance between adjacent legends. Valid only when multiple series exist. Distance: the distance between the legend and the upper and lower boundaries of the widget and column chart. 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: When enabled, the x-axis is displayed. When disabled, the x-axis is hidden.

    • White Space: the distance between the left and right sides of the x-axis. Valid values: 0 to 1.

    • interval: the spacing between columns on the x-axis. A larger value results in thinner columns and wider spacing. Valid values: 0 to 0.95.

    • Axis Label: the axis label style of the x-axis. Click the icon to show or hide the x-axis labels.

      Parameter	Description
      Text	The font style, weight, font size, and color of the x-axis label text.
      Axis Label Display	The angle of the x-axis label. You can select Horizontal, Oblique, or Vertical. The number and units of the x-axis labels.

    • Axis: the x-axis line style. Click the icon to show or hide the x-axis.

      Color: the color of the x-axis.

    • Gridlines: the x-axis gridline style. Click the icon to show or hide x-axis gridlines.

      Color: the color of the x-axis grid lines.

  • Y-axis

    • Y Axis Visible: When enabled, the y-axis is displayed. When disabled, the y-axis is hidden.

    • Range: the range between the minimum and maximum values of the y-axis.

      Parameter	Description
      Maximum Runtime Duration	The maximum value of the y-axis. You can customize the value or select the value. Automatic Rounding: The system automatically calculates the maximum value, minimum value, and the number of metric points in the data. Maximum Data Value: the maximum value in the data.
      Minimum Runtime Duration	The minimum value of the y-axis. You can customize the value or select the value. Automatic Rounding: The system automatically calculates the maximum value, minimum value, and the number of metric points in the data. Minimum Data Value: the minimum value in the data. 0: By default, the minimum value of the y-axis range is 0.

    • Axis Label: the y-axis label style. Click the icon to show or hide the y-axis labels.

      Parameter	Description
      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%(percentage), 11.1% (percentage), 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 number and units of the y-axis labels.

    • Axis: the y-axis line style. Click the icon to show or hide the y-axis.

      Color: the color of the y-axis.

    • Gridlines: the y-axis gridline style. Click the icon to show or hide y-axis gridlines.

      Color: the color of the grid lines on the y-axis.

• 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 can be customized. If not specified, the value of the s field in the component data is used as the series name. When specified, ensure the data return order matches.
  Color	The column color for this data series.

• Remarks

  • Easement Animation: the animation effect for the chart. Click the icon to enable or disable animations.

    Parameter	Description
    Animation Settings	Ease Effect: the easing effect of the animation. Multiple common easing effects are available. Sequential animation of each series: When enabled, each data series plays the animation sequentially. When disabled, all columns animate simultaneously.
    Admission Animation	The duration of the first animation rendered by the component. Unit: ms.
    Update Animation	Update Animation Duration: the duration of the animation when the widget data is updated. Unit: ms. Start From Previous Position: When enabled, the animation starts from the previous position on data update. When disabled, it starts from the initial position.

  • dialog box: The style of the dialog box that appears when you hover over or click columns on the preview or publish page. Click the icon to enable or disable the dialog box.

    Parameter	Description
    Disappearing Delay Time	The delay before the dialog box disappears after the trigger condition is no longer met. Unit: ms.
    Trigger	Trigger Type: the trigger target type. This field is optional. Valid values: Data Item and Axis. Trigger Action: the action that triggers the dialog box. This field is optional. Valid values: Hover and Click.
    Text Style	The style of the text in the dialog box, including the font style, weight, font size, and color.
    Axis Indicator	The axis indicator style displayed when the trigger type is set to Axis and the trigger action is executed. Type: the type of the axis indicator. Only Line Indicator is supported. Line Style: indicates the line color, width, and line type. The line type is optional. Valid values: Solid Line, Dotted Line, and Dotted Line.
    Background Box Style	The background box style of the dialog box. Background Color: the background color of the dialog box. Custom: the width and height of the dialog box. Unit: pixels. Click the icon to turn custom dialog box on or off. Pin: the inner margin of the dialog box. Unit: pixels. Offset Horizontal Offset: the horizontal offset of the dialog box relative to the mouse arrow. Unit: px. Vertical Offset: the vertical offset of the dialog box relative to the mouse arrow. Unit: px. Borders Border Size: the border size of the dialog box. Unit: pixels. Border Color: The border color of the dialog box.

Data Sources panel

Advanced Panel

When you click a data item: Enable this switch to allow widget interaction. When you click a column in the zebra column 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 displayed. 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 zebra bar interface request is completed	Triggered with 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 is clicked, emitting the corresponding data item.

   • Action

     Action	Description
     Import a zebra column	Imports pre-processed data for widget 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 zebra histogram	Requests server data again, using data from an upstream processing node or layer node as parameters. For example, if the API data source is set to https://api.test and the data passed to the Request Zebra API action is { id: '1'}, the final request interface is https://api.test?id=1.
     Highlight	data: the data item to be highlighted. { x: 'Inner mongolia' } Reference data example { "data": {}, "options": {} }
     Unhighlight	data: the data item to unhighlight. When the data field is not specified, all highlighted items are unhighlighted. { x: 'Inner mongolic' } Reference data example { "data": {}, "options": {} }
     Clear components	Clear component 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" } }
     Switch Display /Hide	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 configuration data, then modify the style field in the Blueprint Editor data processing node.