This topic describes the configuration items of the Grouped Column Chart widget and how to use this widget. You can customize data along the y-axis to display data differences.

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.
  • Chart
    • Font Family: The font of the displayed text. The default font is Microsoft YaHei.
    • Bar Options: The style of each column.
      • 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 right border of the chart. The value range is from 0 to 1.
      • Background Color: The background color of the columns. For information about how to set the color, see Color picker.
    • Margin: The spacing between the chart and the chart borders.
      • Top: The spacing between the columns and the top border of the chart.
      • Bottom: The spacing between the columns and the bottom border of the chart.
      • Left: The spacing between the leftmost column and the left border of the chart.
      • Right: The spacing between the rightmost column and the right border of the chart.
    • Label: The style of each label. To display the labels, click the Eye icon.
      • Text Style
        • Font Size: The font size of the label text.
        • Font Color: The font color of the label text.
        • Font Weight: The font weight of the label text.
      • Vertical Offset: The vertical offset of the labels. If the value of this parameter is smaller than 0, the labels are offset upward. If the value of this parameter is greater than 0, the labels are offset downward.
      • Horizontal Offset: The horizontal offset of the labels. If the value of this parameter is smaller than 0, the labels are offset leftward. If the value of this parameter is greater than 0, the labels are offset rightward.
  • X Axis: The style of the x-axis. To display the x-axis, click the Eye icon.
    • Text Style
      • Color: The font color of the text along the x-axis.
      • Font Size: The font size of the text along the x-axis. The value range is from 10 to 100.
      • Font Weight: The font weight of the text along the x-axis.
      • Tick Size: The length of the ticks along the x-axis. The value range is from 0 to 40.
      • Label Distance from X Axis: The spacing between the text along the x-axis and the x-axis. The value range is from -40 to 40.
      • Assist Line: If you select this check box, the axis line and ticks are displayed.
  • Y Axis: The style of the x-axis. To display the y-axis, click the Eye icon.
    • Text Style
      • Color: The font color of the text along the y-axis.
      • Font Size: The font size of the text along the y-axis. The value range is from 10 to 100.
      • Font Weight: The font weight of the text along the y-axis.
    • Unit: The unit of the label text along the y-axis.
    • 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, the minimum value, and the number of ticks.
    • 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, the minimum value, and the number of ticks.
    • Tick Size: The length of the ticks along the y-axis. The value range is from 0 to 40.
    • Label Distance from Y Axis: The spacing between the text along the y-axis and the y-axis. The value range is from -40 to 40.
    • Assist Line: If you select this check box, the axis line and ticks are displayed.
  • Series: To add or delete a series, click + or click the Trash icon.
    • Color: To set the fill color type, click the drop-down arrow and select the target type. To change the color of a series, see Color picker.
      • Solid fill
      • Gradient fill
        • You can select two colors as the gradient colors.
        • To change the gradient angle, enter a value or drag the slider. The value range is from 0 to 360.
    • Series to Type
      • If you select this check box, the column chart is displayed in type mode. If the type mode is not displayed, check whether you have set the s field, which defines the column type. A category corresponds to a specific type.
      • If you clear this check box, the column chart is displayed in series mode. If the series mode is not displayed, check whether you have set the s field, which defines the column type. For example, if you set two series, two columns are displayed for each category.
  • Animation: The animation of the columns. 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 starting point.

Data

The JSON example in the preceding figure is as follows:
[
  {
    "x": "Shanghai",
    "y": 23
  },
  {
    "x": "Shenzhen",
    "y": 13
  },
  {
    "x": "Hefei",
    "y": 2
  },
  {
    "x": "Chengdu",
    "y": 9
  },
  {
    "x": "Anhui",
    "y": 5
  },
  {
    "x": "Beijing",
    "y": 10
  },
  {
    "x": "Hangzhou",
    "y": 14
  },
  {
    "x": "Changsha",
    "y": 24
  }
]
  • x: The category text of each column.
  • y: The actual data value of each column.
  • s: Optional. The series data.

Interaction

This widget is not connected to any events yet.