3D column chart

Chart style

The 3D column chart is a type of column chart that displays data differences between and within categories from a 3D perspective. It supports various projection methods, interactions, and special effects.

Configuration panel

• Search configuration: Click the search icon in the upper-right corner of the configuration panel and enter the name of a configuration item to locate it. The system supports fuzzy matching. For more information, see Search for an asset configuration.

• Chart size: The width and height of the widget in px. You can click the icon to lock the aspect ratio of the widget, which lets you scale the width and height proportionally. Click the icon again to unlock it. After you unlock the icon, the aspect ratio is not restricted.

• Chart position: The x- and y-coordinates of the widget in px. The x-coordinate is the distance from the upper-left corner of the widget to the left edge of the page. The y-coordinate is the distance from the upper-left corner of the widget to the top edge of the page.

• Rotation angle: Rotates the widget around its centroid in degrees (°).

  • You can enter an angle value to control the rotation.

  • You can drag the black dot inside the icon to control the rotation.

  • You can click the icon to flip the widget horizontally.

  • You can click the icon to flip the widget vertically.

• Opacity: A value from 0 to 1. A value of 0 hides the chart, and a value of 1 makes the chart fully visible. The default value is 1.

• Graph

  Parameter	Description
  Projection method	The projection method for the column chart. Options include Perspective projection and Orthographic projection.
  Chart size	The width, height, and depth of the column chart in the 3D scene. Use this with the distance configuration to get the best display size.
  View rotation	The center point for the column chart's view rotation. The chart rotates around this point.
  Centroid	The horizontal and vertical rotation angles of the column chart.
  Bevel	The bevel of the columns, including size and smoothing, in px.
  Column color	The color style of the columns. For more information, see Color mapper guide.
  Column label	The style of the column labels. Click the icon to show or hide the column label configurations. Label field: The content of the label must correspond to a field in the data panel. By default, it gets the content of the z field. Number format: Set the number format for the label. Options include Default, 11 (Integer), 11.1 (Floating-point number), 11.11 (Floating-point number), 11% (Percentage), 11.1% (Percentage), 1,111 (Thousands separator), and 1,111.1 (Thousands separator). For more information about data display formats, see Data display format guide. This is displayed only when the label field is set to z. Prefix and suffix: Set the prefix and suffix for the column label. Offset: The distance of the column label from the graph, in px. Text style: The text style for the column label, including font, weight, font size, and color.

• Axes: The widget axes include the x-axis, y-axis, and z-axis.

  • X-axis

    • Show x-axis: Turn on the switch to show the x-axis. Turn off the switch to hide the x-axis.

    • Data type: The data type for the x-axis. The options are Category and Time.

    • Axis line: The style of the x-axis line, including its type, thickness, and color. You can click the icon to show or hide the x-axis line style.

    • Axis title: The style of the x-axis title. You can click the icon to show or hide the x-axis title.

      Parameter	Description
      Title display	The text content of the x-axis title.
      Offset	The offset of the x-axis title.
      Text style	The font, weight, font size, and color of the x-axis title text.

    • Tick line: The style of the x-axis tick lines, including their length, thickness, and color. You can click the icon to show or hide the x-axis tick line style.

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

      Parameter	Description
      Label display	The display style of the labels, including the number of x-axis labels, prefix and suffix, and offset.
      Text style	The font, weight, font size, and color of the x-axis label text.

    • Indicator line: The style of the x-axis indicator lines. You can click the icon to show or hide the x-axis indicator lines.

      Parameter	Description
      Line style	The thickness and color of the x-axis indicator lines.
      Text style	The font, weight, font size, and color of the x-axis indicator line text.
      Spacing	The distance of the x-axis indicator label from the centroid.

    • Gridline: The style of the x-axis gridlines, including their line style, thickness, and color. You can click the icon to show or hide the x-axis gridlines.

  • Y-axis: The styles are the same as those for the x-axis. For more information, see the X-axis style configuration.

  • Z-axis

    • Show z-axis: Turn on the switch to show the z-axis. Turn off the switch to hide the z-axis.

    • Display range: The display range for the minimum and maximum data values on the z-axis.

      Parameter	Description
      Minimum	The minimum value of the z-axis. You can enter a custom value or select Data minimum to use the minimum value from the data.
      Maximum	The maximum value of the z-axis. You can enter a custom value or select Data maximum to use the maximum value from the data.

    • Axis line: The style of the z-axis line, including its type, thickness, and color. You can click the icon to show or hide the z-axis line style.

    • Axis title: The style of the z-axis title. You can click the icon to show or hide the z-axis title.

      Parameter	Description
      Title display	The text content of the z-axis title.
      Offset	The offset of the z-axis title.
      Text style	The font, weight, font size, and color of the z-axis title text.

    • Tick line: The style of the z-axis tick lines, including their length, thickness, and color. You can click the icon to show or hide the z-axis tick line style.

    • Axis label: The style of the z-axis labels. You can click the icon to show or hide the z-axis labels.

      Parameter	Description
      Display format	The number display format for the z-axis labels. Options include Default, 11 (Integer), 11.1 (Floating-point number), 11.11 (Floating-point number), 11% (Percentage), 11.1% (Percentage), 1,111 (Thousands separator), and 1,111.1 (Thousands separator). For more information about data display formats, see Data display format guide.
      Label display	The display style of the labels, including the number of z-axis labels, prefix and suffix, and offset.
      Text style	The font, weight, font size, and color of the z-axis label text.

    • Indicator line: The style of the z-axis indicator lines. You can click the icon to show or hide the z-axis indicator lines.

      Parameter	Description
      Line style	The thickness and color of the z-axis indicator lines.
      Text style	The font, weight, font size, and color of the z-axis indicator line text.
      Spacing	The distance of the z-axis indicator label from the centroid.

    • Gridline: The style of the z-axis gridlines, including their line style, thickness, and color. You can click the icon to show or hide the z-axis gridlines.

• Animation: The auto-rotation settings for the column chart.

  • Auto-rotation direction: The auto-rotation direction of the column chart. The options are Counter-clockwise and Clockwise.

  • Auto-rotation speed: The auto-rotation speed of the column chart, in ms.

• Interaction

  • Mouse: The mouse interaction operations for the column chart.

    • Horizontal rotation: The sensitivity of horizontal rotation with the mouse.

    • Vertical rotation: The sensitivity of vertical rotation with the mouse.

    • Scaling: The sensitivity of scaling with the mouse.

    • Motion inertia: The lag factor for operations such as rotation and scaling. If this value is greater than 0, the view continues to move due to inertia after the mouse operation stops.

  • Tooltip: The style of the tooltip that appears when you hover over or click a column on the preview or published page. You can click the icon to enable or disable the tooltip.

    Parameter	Description
    Trigger method	The method to trigger the tooltip. Options include Hover and Click.
    Title spacing	The spacing between titles in the tooltip, in px.
    Title text	The style of the title text in the tooltip, including font, weight, font size, and color.
    Content display	Displayed when Mode is set to General. Click the or icon on the right to add or delete a content display series for the tooltip. Click the or icon to configure the arrangement of multiple content display series. Click the icon to copy the current content display series configuration and add a new series with the same configuration. Field name: The field name for the tooltip content. This must match a field in the data panel. Display name: The display name for the tooltip content.
    Content spacing	The spacing between content text in the tooltip, in px.
    Content text	The style of the content text in the tooltip, including font, weight, font size, and color.
    Popup background	The background style of the tooltip popup. Background margin: The horizontal and vertical margin of the tooltip popup background. Background color: The background color of the tooltip. Border style: The style of the tooltip border, including line type, border radius, line width, and border color.

  • Selected state: The color of a column when it is selected. You can click the icon to enable or disable the selected state style.

• Legend

  Parameter	Description
  Legend switch	Click the icon to enable or disable the legend style.
  Direction	The display direction of the legend. Options include Horizontal and Vertical.
  Horizontal alignment	The horizontal alignment of the legend. Options include Left, Center, and Right.
  Vertical alignment	The vertical alignment of the legend. Options include Top, Center, and Bottom.
  Invert	Invert the legend icons.
  Text style	The font, weight, font size, and color of the legend text.
  Display dimension	Specify the dimension mapping. Options include X, Y, and Z axes.
  Legend type	The display type of the legend. Options include Categorical and Continuous.
  Categorical legend	Displayed when the legend type is set to Categorical. Legend marker: The marker shape, width, and height for the legend. Legend spacing: The spacing between legend items. Includes spacing between groups and within groups. Number of segments: The number of segments in the legend.
  Continuous legend	Displayed when the legend type is set to Continuous. Track size: Set the width and height of the track. Slider range: Set the minimum and maximum values for the slider.

• Effects

  Parameter	Description
  Shading effect	Set the shading effect for the 3D graph. Options include Color only and Shading effect.
  Lighting effect	Displayed when Shading effect is set to Shading effect. Main light source: Set the light intensity, light color, horizontal and vertical rotation of the light source, projection, and shadow quality. Ambient light: Set the intensity and color of the ambient light.
  Post-processing effects	Bloom: Set the intensity of the bloom effect. Depth of field: Set the depth of field size and blur radius. Note Size: The F-number of the lens. A smaller value results in a shallower depth of field.

Data panel (Default mode)

Field configuration

Data panel (Analysis mode)

For detailed instructions on the BI analysis data configuration panel, see BI analysis mode data panel features.

Configuration field descriptions

Interaction panel

Turn on the switch to enable widget interaction. When you click a column in the 3D column chart, a data request is triggered to pass variables and dynamically load data for other components. By default, the x, y, and z values from the data are passed. For more information about specific configurations, see How to configure the callback ID for a ticker board widget.

Blueprint Editor interaction configuration

1. In Canvas Editor, right-click a widget in the Layer panel and select Add to Blueprint Editor.
2. Click the icon in the upper-left corner of the page.

3. On the Import Node tab, drag the 3D Column Chart widget to the main canvas. The following figure shows the Blueprint Editor configuration parameters for the 3D column chart.

   • Events

     Event	Description
     When a 3D Column Chart API Request Completes	This event is triggered after the data API request is returned and processed by the filter. The processed data is passed in JSON format. For a data example, see the Data response area on the Data tab of the widget's configuration panel in the canvas editor.
     When the 3D Column Chart API request fails	This event is triggered when a data API request fails, for example, due to network issues or API errors, after the response is returned and processed by a filter. This event provides the processed data in JSON format. For a data example, see the Data Response area on the Data tab of the widget's configuration panel in the canvas editor.
     When a data item is selected	This event is triggered when a column in the 3D column chart is selected. The data item that corresponds to that column is also passed.

   • Actions

     Action	Description
     Request 3D Column Chart API	Re-requests server-side data. Data passed from input data processing nodes or layer nodes is used as a parameter. For example, if the 3D column chart is configured with an API data source of https://api.test and the data passed to the Request 3D Column Chart API action is { id: '1'}, the final requested API is https://api.test?id=1.
     Import 3D Column Chart API	Processes the data according to the widget's drawing format and then imports it to redraw the widget. It does not need to re-request server-side data. For a data example, see the Data response area on the Data tab of the widget's configuration panel in the canvas editor.
     Update widget configuration	Dynamically updates the style configuration of the widget. First, in the widget's style panel, click Copy Configuration to Clipboard to get the widget configuration data. Then, change the field values for the corresponding styles in the data processing node on the Blueprint Editor configuration page as needed.
     Show	Shows the widget. The following is a data example. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Hide	Hides the widget. The following is a data example. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Toggle visibility	Toggles the visibility of the widget. The following is a data example. return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } }
     Move	Moves the widget to a specified position. The following is a data example. return{ // Movement method. Absolute positioning: to. Relative positioning: by. Default value: to. "positionType": "to", // Specified position. x-coordinate, y-coordinate. "attr": { "x": 0, "y": 0 }, // Animation method. "animation": { "enable": false, // Animation delay. "animationDuration": 1000, // Animation curve. Optional values: linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }