This topic describes the configuration items of the Line Column Chart widget and how to use this widget. This widget consists of a column chart and a line chart. You can customize y-axis values as needed, and set data series to display differences between data categories.

Settings

  • Basic Attributes
    • Size: The width and height of the widget. The unit is pixels.
    • Position: The position of the widget. You can set the widget position by adjusting its x-axis and y-axis. The unit is pixels.
    • Others: The rotation angle and opacity of the widget.
  • Global Settings
    • Font Family: The font of the displayed text. The default font is Microsoft YaHei.
    • Margin
      • Top: The spacing between the line column chart and the top border.
      • Bottom: The spacing between the line column chart and the bottom border.
      • Left: The spacing between the line column chart and the left border.
      • Right: The spacing between the line column chart and the right border.
    • Bar
      • Inner Padding: The horizontal spacing between the columns. The value range is from 0 to 1.
      • Outer Padding: The spacing between the leftmost column and the y-axis, and the spacing between the rightmost column and the z-axis. The value range is from 0 to 1.
      • Color: The background color of the columns.
  • X Axis: The style of the x-axis. To display the x-axis, click the Eye icon.
    • Text Style
      • Font Size: The font size of the text along the x-axis.
      • Font Color: The font color of the text along the x-axis.
      • Font Weight: The font weight of the text along the x-axis.
    • Axis Label: To display the axis labels, click the Eye icon.
      • Angle: The angle of the axis labels. The available options are Horizontal, Slant, and Vertical.
      • Quantity: The number of axis labels.
    • Axis Line: To display the axis line, click the Eye icon.
      • Color: The color of the axis line.
    • Grid Lines: To display the grid lines, click the Eye icon.
      • Color: The color of the grid lines.
  • Y Axis: The style of the y-axis. To display the y-axis, click the Eye icon.
    • Text Style
      • Font Size: The font size of the text along the y-axis.
      • Font Color: The font color of the text along the y-axis.
      • Font Weight: The font weight of the text along the y-axis.
    • Axis Label: To display the axis labels, click the Eye icon.
      • Min: The format of the minimum value along the y-axis.
        • Minimum Data Value: If you select this option, the minimum value is used.
        • Automatic Rounding: If you select this option, the system calculates the value according to the maximum value, minimum value, and number of axis labels.
      • Max: The format of the maximum value along the y-axis.
        • Maximum Data Value: If you select this option, the maximum value is used.
        • Automatic Rounding: If you select this option, the system calculates the value according to the maximum value, minimum value, and number of axis labels.
      • Quantity: The number of axis labels.
      • Display Format: The display format of the axis labels. You can customize the display format or select a format as needed. If you select Auto, the default format is displayed.
    • Unit: The unit of the label text along the y-axis. To display the unit option, click the Eye icon.
    • Axis Line: To display the axis line, click the Eye icon.
      • Color: The color of the axis line.
    • Grid Lines: To display the grid lines, click the Eye icon.
      • Color: The color of the grid lines.
  • Z Axis: The style of the z-axis. To display the z-axis, click the Eye icon.
    • Text Style
      • Font Size: The font size of the text along the z-axis.
      • Font Color: The font color of the text along the z-axis.
      • Font Weight: The font weight of the text along the z-axis.
    • Axis Label: To display the axis labels, click the Eye icon.
      • Min: The format of the minimum value along the y-axis.
        • Minimum Data Value: If you select this option, the minimum value is used.
        • Automatic Rounding: If you select this option, the system calculates the value according to the maximum value, minimum value, and number of axis labels.
      • Max: The format of the maximum value along the y-axis.
        • Maximum Data Value: If you select this option, the maximum value is used.
        • Automatic Rounding: If you select this option, the system calculates the value according to the maximum value, minimum value, and number of axis labels.
      • Quantity: The number of axis labels.
      • Display Format: The display format of the axis labels. You can customize the display format or select a format as needed. If you select Auto, the default format is displayed.
    • Unit: The unit of the label text along the z-axis. To display the unit option, click the Eye icon.
    • Axis Line: To display the axis line, click the Eye icon.
      • Color: The color of the axis line.
    • Grid Lines: To display the grid lines, click the Eye icon.
      • Color: The color of the grid lines.
  • Legend: To display the legend items, click the Eye icon.
    • Text Style
      • Font Size: The font size of the legend text.
      • Font Color: The font color of the legend text.
      • Font Weight: The font weight of the legend text.
    • Layout
      • Margin
        • Horizontal Interval: The horizontal spacing between two legend items. This parameter is available only if the chart has multiple series of data.
        • Vertical Interval: The spacing between the legend items and the top border of the chart, and the spacing between the legend items and the bottom border of the chart.
      • Position: Optional. The position of the legend items.
  • Series: To add or delete a series, click +or click the Trash icon.
    • Series: The value of a series. This value corresponds to the s field in the Data plane.
    • Bar
      • Series Name: The name of a series. You can set a name for the series as needed. If the value of the s field is displayed as the series name, leave the Series Name parameter unspecified.
      • Color: The fill color type of a series. The available options are Solid Fill and Gradient Fill.
      • Label: The style of each label on the columns.
        • Font Size: The font size of the label text.
        • Color: The font color of the label text.
        • Font Weight: The font weight of the label text.
        • Position: The position of the label text. The available options are Top, Middle, and Bottom.
    • Line: The style of the line. To display the line, click the Eye icon.
      Notice The line is displayed only when the z field has a value.
      • Series Name: The name of a series. You can set a name for the series as needed. If the value of the s field is displayed as the series name, leave the Series Name parameter unspecified.
      • Color: The fill color type of a series. The available options are Solid Fill and Gradient Fill.
      • Style: The line style. The available options are Solid Line and Dotted Line.
      • Width: The line width.
      • Curve: If you select this check box, the line is displayed as a curve.
      • Point Style: The style of the points along the line. To display the point style option, click the Eye icon.
        • Radius: The radius of the points. The unit is pixels.
      • Label: The labels along the line. To display the label option, click the Eye icon.
        • Font Size: The font size of the label text along the line.
        • Color: The font color of the label text along the line.
        • Font Weight: The font weight of the label text along the line.
  • Animation: The animation of the line column chart. To display the animation option, click the Eye icon.
    • Original Duration: The period of time needed for the first time the widget renders the animation. The unit is milliseconds.
    • Easing: The animation easing. You can select an easing effect as needed.
    • Animations of All Series In Sequence: If you select this check box, the animations of all columns in the chart are displayed in a sequence. If you clear this check box, the animations of all columns in the chart are displayed at the same time.
    • Duration for Data Update: The period of time needed for the widget to render the animation after data is updated. The unit is milliseconds.
    • Update from Latest Status: If you select this check box, the animation begins from the column where the data is updated. If you clear this check box, the animation begins from the bottom of the x-axis.

Data

The JSON example in the preceding figure is as follows: 
[
  {
    "x": "February",
    "y": "235.5",
    "z": "0"
  },
  {
    "x": "March",
    "y": "156.3",
    "z": "-33.6"
  },
  {
    "x": "April",
    "y": "123.5",
    "z": "-21"
  },
  {
    "x": "May",
    "y": "423.5",
    "z": "42.9"
  },
  {
    "x": "June",
    "y": "456.5",
    "z": "7.8"
  },
  {
    "x": "July",
    "y": "356.5",
    "z": "-21.9"
  },
  {
    "x": "August",
    "y": "456.5",
    "z": "28.1"
  },
  {
    "x": "September",
    "y": "853.5",
    "z": "87"
  }
]
  • x: The category text of each column.
  • y: The actual data value of each column.
  • z: The actual data value along the line.
  • s: Optional. The series value.

Interaction

This widget is not connected to any events yet.