# 排名象形柱图 4.4+

排名象形柱图是用自定义图标或图形的高度或长短来表示数据多少。

# 属性

# 基础

基本属性： 同组件管理 -> 属性 -> 基本属性
系列颜色： 柱子的颜色。支持颜色填充，默认情况下柱子的颜色为主题的颜色。

# 系列

排名象形图为单维度，多度量的图表，因此需要分别设置每个系列下的象形柱属性。

系列 1：
类型： 象形柱和折线的转换。
顺序： 控制图形的层级顺序。值小的图形会被值大的图形覆盖。
数据标注： 是否显示最大值、最小值的数据标注。
普通状态：
- 文本标签： 指象形图图形上的文本标签，可用于说明图形的一些数据信息，例如值、名称等。
  - 显示： 是否显示文本。
  - 内容格式器： 标签内容格式器，支持字符串模板和回调函数两种形式，回调函数返回的字符串可以用 \n 换行。支持从 HETU 内置函数中获取变量值。2024.5+
    
    字符串模板变量
    - {a} : 系列名。
    - {b} : 数据名。
    - {c} : 数据值。
      
      例如：
      {b}: {c}
    回调函数
    
    可用参数为data。
    
    示例：
```
return data.name;
```
    参数 data是内容格式器需要的单个数据资源。格式如下：
```
{
  // 数据名，类目名
  "name": string,
  // 传入的原始数据项
  "data": Object,
  // 传入的数据值
  "value": number | Array,
  // 百分比
  "percent": number
}
```
  - 位置： 文本标签上值的位置。
  - 文字距离： 文本间的距离，首先需要选择标签的位置，才能定义文本间的距离。
  - 文字旋转： 文字旋转角度。
  - 文字偏移： 文字相对于原本位置的偏移。
  - 水平对齐： 文字在水平方向上的对齐方式。
  - 垂直对齐： 文字在垂直方向上的对齐方式。
  - 宽高： 文本标签的宽度和高度。
  - 超出宽度： 文字超出宽度的处理方式。
  - 字体颜色： 修改字体的颜色。
  - 字体大小： 修改字体的大小。
  - 字体粗细： 修改字体的粗细，可为普通和加粗和更细，默认为普通。
  - 字体： 修改字体的样式。
- 图形样式： 指象形图图标样式，例如偏移、定位等。
  - 图形选择： 见组件管理 -> 属性 -> 图标选择器。
  - 偏移位置： 图标相对于坐标轴的水平或垂直偏移，支持百分比和绝对值。
  - 是否重复： 图形是否允许重复。
  - 图形定位： 图形相对于图表的位置。
  - 图形间隔： 图形之间的间隔。
  - 是否剪裁： 图形是否剪裁。
  - 宽度： 象形柱的宽度，支持绝对值和百分比。
  - 最小高度： 象形柱的最小高度。
  - 不同系列间距： 象形柱不同系列之间的柱间距。
  - 同系列间距： 象形柱同系列之间的柱间距。
  - 隐藏底部图形： 是否隐藏底部图形。
  - 渐变色： 图标设置渐变色。
  - 颜色： 图标设置颜色，支持多个颜色值。
  - 描边颜色： 图标设置描边线颜色。
  - 描边线宽： 图标设置描边线宽度。
  - 描边类型： 图标设置描边线类型，支持实线和虚线和点线。
  - 阴影属性： 图标设置阴影属性。
高亮状态： 属性配置与普通状态样式相同。
图表标线： 见组件管理 -> 属性 -> 图表标线。4.2+
标签布局： 见组件管理 -> 属性 -> 标签布局。4.3+
初始动画： 对组件动画的配置。
- 开启动画： 组件是否启用动画。
- 动画时长(ms)： 动画的时长。
- 缓动效果： 动画的缓动效果。
数据映射： 同饼图属性 -> 系列 -> 数据映射。3.0+
折线设置： 该系列下折线的设置，见折线图 -> 折线图 -> 属性。
系列 2：系列 2 为另一条柱子的系列设置，配置与系列 1相同。

# 数据

# 静态数据

系列颜色

上图中的示例JSON代码如下：

[
  {
    "x": "一月",
    "y1": 33,
    "y2": 21
  },
  {
    "x": "二月",
    "y1": 12,
    "y2": 14
  },
  {
    "x": "三月",
    "y1": 41,
    "y2": 63
  }
]

x：维度，各柱的类目。
y1： 度量，系列 1 柱的值。
y1： 度量，系列 2 柱的值。

象形图中需要单维度、多度量的数据，所以横轴中只解析拖入的第一个字段、纵轴中解析拖入的前两个字段，多余字段在图表中不解析。

# 数据资源

系列颜色

# 交互

# 柱图单击交互事件

勾选启用，开启组件交互功能。当单击象形图柱子时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考组件交互。

# 柱图悬停事件

勾选启用，开启组件交互功能。当悬停柱子时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考组件交互。

# 柱图移出事件

勾选启用，开启组件交互功能。当移出柱子时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考组件交互。

# X 轴标签单击事件

勾选启用，开启组件交互功能。当单击 X 轴标签时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考组件交互。

# Y 轴标签单击事件

勾选启用，开启组件交互功能。当单击 Y 轴标签时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考组件交互。

# 数据响应

象形图支持数据响应配置。

# 数据上卷，下钻

象形图支持数据上卷，下钻配置。

# 节点编程

详见柱图节点编程

← 自定义象形柱图立体象形柱图 →

# 排名象形柱图 4.4+

# 属性

# 基础

# 系列

# 视区

# X 轴

# Y 轴

# 标题

# 图例

# 提示框

# 工具栏

# 时间轴