概述

flexX 是一个用于调整柱形图宽度的转换方法。它允许根据数据值动态调整柱形的宽度，使得柱形的宽度能够反映另一个数据维度，从而在可视化中展示更多的信息维度。这种转换特别适用于：

1. 需要同时展示两个定量变量的场景，如国家 GDP（宽度）和人均 GDP（高度）的关系
2. 展示市场份额和细分结构的商业分析图表
3. 人口统计数据的多维度可视化，如人口总数（宽度）和年龄分布（高度）
4. 销售数据分析，如销售总额（宽度）和利润率（高度）的关系

通过 flexX 转换，我们可以在传统柱状图的基础上增加一个额外的数据维度，使图表更加信息丰富。

{
  "paddingLeft": 60
}

使用场景

1. 不等宽柱形图：当需要柱子的宽度反映数据的某个维度时，例如国家 GDP 总量决定柱子宽度，而柱高展示人均 GDP。

2. 马利梅柯图（Marimekko Chart）：结合 stackY 和 normalizeY 转换，可以创建复杂的商业分析图表，展示市场份额和细分数据。
   使用国家 GDP 总量作为柱形宽度，人均 GDP 作为柱形高度：

{
  "paddingBottom": 100
}

配置项

类型定义

type Primitive = number | string | boolean | Date;

type Reducer = 'sum' | ((I: number[], V: Primitive[]) => Primitive);

参数说明

• field: 用于指定柱形宽度的数据字段。当设置了 field 时，其优先级高于 channel。
• channel: 指定用于计算柱形宽度的编码通道，默认使用 'y' 通道的值。
• reducer: 聚合函数，用于计算最终的宽度值。默认使用 'sum' 求和。

示例

1. 马利梅柯图（Marimekko Chart）

结合 stackY 和 normalizeY 转换创建市场分析图：

{
  "paddingLeft": 0,
  "paddingRight": 0
}

在这个例子中，flexX 转换使得每个市场部分的宽度与其总价值成正比，结合堆叠和归一化处理，可以清晰地展示市场份额的分布情况。

这个例子展示了如何使用 flexX 来可视化人口数据，其中柱子的宽度表示州/省的总人口数量，高度表示人口密度，颜色区分不同地区。

2. 时间序列数据分析

展示每月销售数据，使用交易量作为宽度，价格变化率作为高度：

{
  "paddingLeft": 60,
  "scale": {
    "y": {
      "nice": true
    }
  },
  "style": {
    "radius": 4
  },
  "axis": {
    "y": {
      "title": "价格变化率",
      "labelFormatter": ".0%"
    }
  }
}

这个时间序列示例展示了如何使用 flexX 来可视化交易数据，其中柱形的宽度表示交易量大小，高度表示价格变化率，颜色区分涨跌情况。通过这种方式，我们可以同时观察到交易活跃度和价格走势的关系。