> ## Documentation Index
> Fetch the complete documentation index at: https://clickhouse.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

> 内置 Web SQL UI (`/play`) 中按列颜色编码模式的文档

# Web UI 颜色编码

内置的 Web SQL UI (`play.html`，可通过任意 ClickHouse HTTP 端口上的 [`/play`](/docs/zh/concepts/features/interfaces/http) path 访问) 可以为结果单元格着色，便于一眼识别某一列中的模式。每一列都有各自独立且可单独切换的颜色编码模式。

<div id="switching-the-mode">
  ## 切换模式
</div>

每个列标题右侧都会出现一个 🌈 图标。点击它即可在该列支持的各个模式之间循环切换。在支持悬停指针 (鼠标) 的设备上，只有鼠标悬停在标题上时才会显示该图标，这样平时不会遮挡内容；而在触摸设备及其他粗指针设备上，由于不支持悬停，该图标会始终显示，以便直接点按。

列可提供的模式取决于其类型：

* 数值列以及 `Date`/`DateTime`/`Date32`/`DateTime64` 列会按 `bar` → `heatmap` → `categorical` → `none` 的顺序循环切换。
* 其他所有列则在 `none` 和 `categorical` 之间切换。

默认情况下，数值列的模式为 `bar`，其他所有列 (包括日期和时间列) 的模式均为 `none`。

<div id="modes">
  ## 模式
</div>

* **`bar`** — 在单元格中绘制与值成比例的水平条。对于数值列，条形会从零基线开始延伸；对于 `Date`/`DateTime` 列，则会改为覆盖该列的 `min`..`max` 范围，因为零基线对时间戳没有实际意义。
* **`heatmap`** — 用颜色填充整个单元格背景，颜色根据该列最小值与最大值之间的缩放值来编码。
* **`categorical`** — 用基于单元格值哈希得到的颜色填充单元格背景，因此相同的值会显示为相同的颜色，不同的值会显示为不同的颜色。这适用于任何列类型。
* **`none`** — 不使用颜色编码。

`Date`、`DateTime`、`Date32` 和 `DateTime64` 列会根据其时间值着色，并按 UTC 解析，因此该标度不受查看者浏览器时区的影响。

`heatmap` 和 `categorical` 的背景颜色使用 `oklch` 色彩空间，只改变色相，同时根据主题固定明度和彩度，因此无论在浅色还是深色主题下，单元格文本都能保持可读。即使某一行显示为多行，背景也会填满整个单元格。

<div id="categorical-emphasis">
  ## 按所选内容进行 categorical 强调
</div>

在 `categorical` 模式下，选择一个单元后，其他具有相同值的单元会被突出显示：它们会以更粗的字重和完全对比的文本颜色显示 (深色主题中为纯白，浅色主题中为纯黑) 。被选中的单元本身则不会被强调。这样就能轻松看出某个特定值在该列中的其他位置还会出现在哪里。

<div id="persistence">
  ## 持久化
</div>

所选模式会按列保存在页面 URL 和浏览器历史记录中，因此重新加载页面、共享链接，或前后导航时，这些设置都会得到保留。为使 URL 和历史记录状态尽量精简，仅存储非默认选项。

<div id="limitations">
  ## 局限性
</div>

* 纵向 (转置) 单行布局不显示颜色编码。
* `DateTime64(9)` 在 1 微秒以下的差异不会在色标中加以区分，因为这类渐变在视觉上没有实际意义。