Scripting
开始
文档
更新日志
隐私
开始
文档
更新日志
隐私
简体中文

热力图（HeatMapChart）

HeatMapChart（热力图）组件用于以网格形式展示二维数据的分布情况，其中每个单元格的颜色深浅表示该位置对应的数值大小。非常适合用于可视化两个分类维度之间的关系、频率或强度。

使用示例

1<Chart
2  aspectRatio={{
3    value: 1,
4    contentMode: 'fit'
5  }}
6>
7  <HeatMapChart
8    marks={[
9      { x: "+", y: "+", value: 125 },
10      { x: "+", y: "-", value: 10 },
11      { x: "-", y: "-", value: 80 },
12      { x: "-", y: "+", value: 1 },
13    ]}
14  />
15</Chart>

属性说明

marks: Array<object> （必填）

每个项表示热力图中的一个网格单元，包括其位置（X/Y 坐标）和用于计算颜色强度的数值。

字段：

  • x: string 横轴坐标（例如某个分类或标签）。

  • y: string 纵轴坐标（例如另一分类或标签）。

  • value: number 该坐标点对应的数值，用于映射颜色的深浅。数值越大，颜色通常越深或越饱和。

  • 继承自 ChartMarkProps 的其他样式属性： 支持进一步的样式配置，包括：

    • foregroundStyle（前景颜色）
    • opacity（透明度）
    • annotation（注释）
    • cornerRadius（圆角）
    • zIndex 等

适用场景

HeatMapChart 适用于以下数据可视化需求：

  • 展示相关性矩阵（correlation matrix）
  • 分析两个分类维度之间的分布关系
  • 可视化频率、密度或绩效指标的强弱分布

完整示例

1const data = [
2  { positive: "+", negative: "+", num: 125 },
3  { positive: "+", negative: "-", num: 10 },
4  { positive: "-", negative: "-", num: 80 },
5  { positive: "-", negative: "+", num: 1 },
6]
7
8<HeatMapChart
9  marks={data.map(item => ({
10    x: item.positive,
11    y: item.negative,
12    value: item.num,
13  }))}
14/>
大纲