Display query results on a funnel chart

Chart style

Funnel charts visualize single-flow, unidirectional processes with standardized stages and long cycles. By comparing business data across funnel stages, you can identify where drop-offs occur and make informed decisions. Each trapezoidal area represents the difference in business volume between consecutive stages.

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 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 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. 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.

• Graphics

  Metric	description
  Chart Margins	Click the icon to toggle chart margins. When enabled, you can set the distance between the funnel chart area and each boundary of the widget. Unit: pixels.
  Data grouping	The data group style of the component. You can select Multiple Groups or Two Groups. Click the icon to control the display of data groups. Note After you enable data grouping, configure two or more trace fields in the data.
  Funnel shape	The shape of the funnel. Valid value: Funnel and Pyramid. Note You can configure this only when you enable the Data Grouping configuration items and select Multiple Data Groups. If you set the Data Grouping parameter to Compare Two Groups, the Funnel Shape parameter is set to Funnel by default.
  Funnel Width	The width of the funnel. Valid values: 0 to 1.
  Funnel Direction	The direction of the funnel. Valid values: Vertical and Horizontal.
  Color	For more information about the color of a funnel chart, see Use the color mapper.
  Stroke	The style of the stroke line in a funnel chart, including the stroke line type, line thickness, and line color.
  Funnel callout	The label style for data in the trapezoidal area of the funnel chart. Click the icon to show or hide label settings. Label Field: The label content must correspond to the field content on the Data tab. Valid values: type, value, and type+value. By default, the content of the value field is obtained. value: If you set the Label Field parameter to value, you can specify the prefix and suffix of the value field content, the value format style, and the value format style. type: If you select type for Labeling Field, you can customize the prefix and suffix of the type field. type+value: If you select type+value for the Labeling Field field, you can customize the prefix and suffix of the type+value two fields, set the value format to a specific value or proportion, and set the format style corresponding to the value or proportion. Note When two label values are displayed, you can turn on the Fold configuration items to display the label wrap. Value Format: the format of the label field, including Value and Percentage. Value Format: Set the value format of the label. Valides include Default, 11 (integer), 11.1 (floating point), 11.11 (floating point), 11%(percentage), 11.1%(percentage), 1,111 (thousands separator), and 1,111.1 (thousands separator). For more data display formats, see Data display format description. This parameter is displayed only when you select value or type+value for the label field. Relative Offset: the vertical and horizontal offset of the funnel dimension relative to the trapezoid area. Unit: pixels. Text Style: the text style of the funnel label, including the font style, weight, font size, and color of the text. Text Stroke: the stroke style of the funnel callout, including the thickness and color of the stroke line.

• Animation: the animation effect style of the funnel chart.

  Metric	description
  Animation Switch	Enable this switch to configure animation effects for the funnel chart.
  Animation	The animation type. Common animation effects include Zoom, Move, Flip, Horizontal Growth, and Vertical Growth. Available only when animation is enabled.
  Animation Duration	The duration of the animation effect. Unit: ms. Available only when animation is enabled.

• Interactive: the interaction style of the funnel chart widget.

  • dialog box: the style of the dialog box that appears when you move the pointer over or click the funnel ladder block on the preview or publish page. Click the icon to turn the dialog box on or off.

    Metric	description
    Mode	The dialog box mode. Valid values: concise and universal.
    Trigger	The method by which the dialog box is triggered. You can select Hover or Click.
    Display Position	The position of the dialog box. Valid values: Up, Down, Left, and Right.
    Content Display	Click the or icon on the right to add or delete a dialog box content series. Click the or icon to configure the arrangement style of multiple dialog box content display series. Click the icon to copy the current dialog box content display series configuration and add a dialog box content display series with the same configuration. Display Field: dialog box the name of the field to be displayed, which must match the field in the data panel. Display Copy: dialog box display copy content. Suffix: the suffix of the dialog box copy.
    Content Spacing	The distance between content in the dialog box.
    Content Text	The style of the content text in the dialog box, including the font style, text weight, font size, and color.
    Box Style	The dialog box popup style. Box Size: dialog box the size of the box, including the horizontal and vertical margins. Unit: pixels. Fillet: dialog box the value of the fillet. Unit: pixels. Frame Style: dialog box the color of the frame. Frame Stroke: dialog box the stroke style of the frame, including the line type, line thickness, and line color.

  • Selected: the selected mode. You can click the icon to enable or disable the selected mode.

    Metric	description
    Trigger	The trigger mode of the funnel trapezoid. Valid value: Hover and Click.
    Select Method	The method that is used to select a funnel trapezoid. Valid values: Single choice and Multiple choice.
    Selected Style	The color of the funnel trapezoid block in the selected state. Click the icon to turn the selected style on or off.
    Select Stroke	The stroke line style of the funnel trapezoid block, including the stroke line type, line thickness, and stroke line color. Note When the line type is selected as dotted line or dotted line, the value of the break length of the line and the distance between each break line can also be configured.

• Legend: the legend style of the funnel chart.

  Metric	description
  Legend Switch	Enable this switch to configure the legend style.
  Legend Position	The position of the legend relative to the start coordinates of the widget. Valides include Top Left, Top Center, Top Right, Bottom Left, Bottom Center, Bottom Right, Left Top, Left Center, Left Bottom, Right Top, Right Center, and Right Bottom.
  Text Style	The font style, text weight, font size, and color of the legend text.
  Category Legend	The style of the sub-type legend. Legend Marker: the size and shape of the legend marker. Legend Spacing: the horizontal and vertical distance between the legends of different categories. Maximum Width: the maximum width of the legend. Unit: pixels. Page Flip Allowed: If you turn on the switch, the page number style and arrow style of the legend are enabled. If you turn off the switch, the legend content is displayed on one page and cannot be flipped. Style: the style of the page number, including the font, weight, font size, and color of the page number. Arrow Style: the size, default color, and disabled color of the arrows in the page-turning style.

• Condition: the description of the condition style.

  Conditional Style: Click the or icon to add or delete a conditional style series. Click the or icon to configure the arrangement style of multiple conditional style series. Click the icon to copy the current conditional style series configuration and add a conditional style series with the same configuration. For more information about how to configure conditional styles in each series, see Use conditional trees.

  Color: If the switch is turned on, the color of the funnel trapezoid block in this series of conditions is configured. If the switch is turned off, the color of the funnel trapezoid block under this series of conditions cannot be configured.

Data Sources panel

Advanced Panel

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 a funnel chart request is completed	The event is triggered with the processed JSON data after a data interface request is responded to 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 the selected data item changes	When the trapezoidal block data of the funnel chart changes, this event is raised, and the data item corresponding to the trapezoidal block is also emitted.
     When you click the legend	This event is raised when a funnel chart legend is clicked, and the corresponding data item of the legend is also emitted.

   • Action

     Action	Description
     Import Funnel Chart Interface	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 Funnel Interface	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 set to https://api.test and the data passed to the request funnel interface is set to { id: '1'}, the final request interface is https://api.test?id=1.
     Highlight	data: the data item to be highlighted. Single highlight { type: 'Category 1 ', value: 70500 } Bulk Highlight [ { type: 'Category 1 ', value: 70500 }, { type: 'Category 2 ', value: 63220 } ] style: Select a style. such as fillStyle, stroke, and opacity. If you do not specify the highlight style, the default style is used. Reference data example { "data": {}, "style": {} }
     Reset selections	Clears the selected item data of the component. No parameters are required.
     Move	Moves 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 /Hide	Shows or hides a widget. No parameters are required.
     Display	Displays the widget. For more information, see the data example. { "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. For more information, see the data example. { "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 for the data processing node in Blueprint Editor.