stacked-area-charts

Chart style

A stacked area chart is a line chart in the mobile widget. It supports custom y-axis interval and multi-series data configuration. It uses a combination of line and area to intelligently display the change trend of multi-dimensional real-time data.

Configuration Panel

• Search Configuration: Click Search Configuration in the upper-right corner of the Configuration panel. In the Search Configuration panel, enter the name of the configuration items that you want to search for to quickly locate the configuration items. Fuzzy match is supported. For more information, see Search for asset configurations.

• Chart name

  • Custom Margin: the distance between the stacked area chart area and the upper, lower, left, and right borders of the widget. The default value is px. You can click the icon to specify the custom margin.

  • Data Point: the style of data points in the chart of the stacked area chart. You can click the icon to control the display of data points.

    Parameter	Description
    Shape	The shape of the data point. Valid values: Circle and Square.
    Size	The size value of the data point.
    Stroke	The stroke style of the data point, including adjusting the color and width size of the data point stroke.

  • Legend: the legend style of the stacked area chart. You can click the icon to display the legend.

    Parameter	Description
    Click to filter	If you turn on the switch, you can use the mobile device to preview or publish the widget. Click the legend of a series in the widget to switch the current series to the selected or unselected status. Then, you can filter and display the data of different series in the visualization application. If you turn off the switch, you cannot filter and display the data of different series. The legend data of all series is displayed at the same time.
    No Color Selected	The legend color of each series when it is not selected.
    Layout	The layout style of the legend. You can adjust the position and alignment of the legend layout.
    Marker shape	The shape of the legend. Valid values: Round and Square.
    Text	The text style of the legend. Font Size: the size of the legend text. Text Width: the weight of the legend text. Color: the color of the legend text. Alignment: the alignment of the legend text. Valid values: Center, Left, and Right.

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

  • X Axis

    • Show: If you turn on the switch, the x-axis style in the widget is visible. If you turn off the switch, the x-axis style in the widget is invisible.

    • Data Type: the type of the x-axis label data. Valid values: Numerical, Numerical, and Time.

      Note

      If the data format and specified data types are not consistent, the widget is displayed abnormally.

      Parameter	Description
      Numerical Type	Supports numeric data such as integers and floating-point numbers.
      Category Type	Data of category types such as character and string is supported.
      Time Type	The data of the time type needs to be configured data format.

    • Number of Scales: the number of scales on the x-axis of the widget.

    • Scale Optimization: If you turn on the switch, the scale on the x-axis of the widget is automatically optimized. If you turn off the switch, you need to customize the maximum and minimum values of the scale on the x-axis of the widget. This configuration is displayed only when you select Numerical Type for the X-Axis Type field.

    • Leave White: the ratio of white space between the two sides of the x-axis. Valid values: 0 to 1.

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

      Parameter	Description
      Display Format	The style of the x-axis label content display format. If the x-axis type is numeric, you can select Original, 11 (integer), 11.1 (floating-point), or 11.11 (floating-point). If the x-axis type is time, you can select different time display styles. This configuration is displayed only when you select Numerical Type or Time Type for the x-axis type.
      Label Offset	The up-down displacement distance of the x-axis labels. Unit: px.
      Text	The font size, text weight, color, and alignment style of the x-axis label text.

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

      Parameter	Description
      Color	The color of the x-axis grid lines.
      Width	The width value of the x-axis grid lines.
      Line Type	The shape of the x-axis grid line. You can select Solid, Dashed, or Dotted.

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

      Parameter	Description
      Color	The color of the x axis.
      Width	The width value of the x-axis.
      Line Type	The shape of the x-axis line. You can select solid, dashed, or dotted.

    • Tick mark: the style of the tick mark on the x-axis. You can click the icon to show or hide the tick mark on the x-axis.

      Parameter	Description
      Color	The color of the x-axis tick marks.
      Line Type	The shape of the scale line on the x-axis. You can select solid lines, dashed lines, or dotted lines.
      Width	The width value of the x-axis tick mark.
      Length	The length value of the x-axis tick mark.

  • Y-axis

    • Display: If you turn on the switch, the y-axis style in the widget is visible. If you turn off the switch, the y-axis style in the widget is invisible.

    • Number of ticks: the number of ticks on the y-axis of the widget.

    • Scale Optimization: If you turn on the switch, the scale in the y-axis of the widget is automatically optimized. If you turn off the switch, you need to customize the maximum and minimum values of the scale in the y-axis of the widget.

    • Leave White: the ratio of white space between the two ends of the y-axis. Valid values: 0 to 1.

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

      Parameter	Description
      Display Format	The display format of the y-axis label value. Valid values: Original, 11 (integer), 11.1 (floating-point number), and 11.11 (floating-point number).
      Label Offset	The up-down displacement distance of the y-axis label. Unit: px.
      Text	The font size, text weight, color, and alignment style of the y-axis label text.

    • Grid: the style of the grid lines in the y-axis. You can click the icon to display or hide the grid lines in the y-axis.

      Parameter	Description
      Color	The color of the y-axis grid lines.
      Width	The width value of the y-axis gridlines.
      Line Type	The shape of the y-axis grid line. Valid values: Solid, Dashed, and Dotted.

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

      Parameter	Description
      Color	The color of the y-axis.
      Width	The width value of the y-axis.
      Line Type	The shape of the y-axis line. Valid values: Solid, Dashed, and Dotted.

    • Tick mark: the style of the tick mark in the y-axis. You can click the icon to display the tick mark.

      Parameter	Description
      Color	The color of the tick marks on the y-axis.
      Line Type	The shape of the y-axis tick mark. Valid values: Solid, Dashed, and Dotted.
      Width	The width value of the y-axis tick mark.
      Length	The length value of the y-axis tick mark.

• Edition

  data series: Click the or icon on the right to add or delete a data series. Click the or icon on the right to configure the arrangement style of multiple data series.

  • Smooth Curve: If you turn on the switch, the curve is displayed as a polyline. If you turn off the switch, the curve is displayed as a polyline.

  • Area Style: the color of the area in the series.

  • Line Style: the style of the line in the series.

    Parameter	Description
    Color	The color of the line
    Width	The width value of the line.

• Others

  • Easement Animation: the animation effect style of the chart. You can click the icon to enable or disable the animation effect.

    Parameter	Description
    Easing Effect	The easing effect of animation. The system provides a variety of common easing effects for you to choose from.
    Entry Animation Duration	The duration of the first animation rendered by the component. Unit: ms.
    Update the animation duration	The duration of the animation when the component data is updated. Unit: ms.

  • dialog box: the style of the dialog box that appears when you move the pointer over or click a polyline dot in an area chart on the preview or publish page. You can click the icon to turn the dialog box effect on or off.

    Parameter	Description
    Series Name	dialog box the font size and name color of the displayed series names.
    Value	dialog box the font size and color of the displayed values.
    Gridlines	You can click the icon to turn on or off the dialog box guide line effect. Width: dialog box a value for the width of the guide line. Line Type: dialog box the line shape of the auxiliary line, which can be solid, dotted, or dotted. Color: dialog box the color of the auxiliary line.
    Background Box	The background box style of the dialog box. Fillet: the fillet size of the dialog box background frame. Unit: pixels. When the value is 0, there is no rounded corner, and the background box is square. The larger the setting value, the larger the radian value of the rounded corner. Color: The background color of the dialog box.

Data Panel

Interactive Panel

Select the Enable check box to enable interactions between widgets. When you click a dot at the area chart of the stack, a data request is triggered and a callback value is thrown to dynamically load the data of different dots. By default, the x value in the data is thrown. For more information, see Component interaction configuration.

Blueprint Interaction

1. In the canvas editor, right-click a widget in the layer pane and select Export to Blueprint Editor.

2. Click the icon in the upper-left corner of the page.

3. In Blueprint Editor, click Stacking area chart in the Imported Nodes pane. You can view the parameters of the Stacking area chart on the canvas, as shown in the following figure.

   • Event

     Event	Description
     When the stack area chart interface description request completes	The event is triggered with the processed JSON data after a data interface request is responded and processed by a filter.
     When a stack area chart interface description request fails	The event that is returned when a data interface request fails (such as network problems or interface errors) and is processed by the filter. The event also throws the processed JSON data.
     When a data item is clicked	The event that is raised when the area chart data point is clicked, along with the data item corresponding to the dot.

   • Action

     Action	Description
     Request Stacking area chart Interface Description	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 stack area chart is configured with the API data source as https://api.test and the data passed to the request stack area chart interface as { id: '1'}, the final request interface is https://api.test?id=1.
     Import Stacking area chart Interface Description	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.