如何反转ngx-charts-heat-map热力图的颜色？

你可以通过两种简单方式实现颜色映射的反转，让低数值对应警示色（比如红色）、高数值对应良好色：

方法1：启用colorScheme的reverse属性 #

ngx-charts的颜色配置支持reverse参数，直接设置为true就能反转默认的颜色映射顺序：

// 组件.ts文件中定义颜色方案
colorScheme = {
  domain: ['#f8f9fa', '#dc3545'], // 原顺序：低数值→浅灰，高数值→红色
  reverse: true // 反转后：低数值→红色，高数值→浅灰
};

方法2：手动反转颜色数组 #

如果需要更精准控制颜色层级，直接调整domain数组的颜色顺序，把警示色放在前面：

colorScheme = {
  domain: ['#dc3545', '#ffc107', '#28a745'] // 低数值→红色，中数值→黄色，高数值→绿色
};

模板中绑定配置 #

在你的热力图组件标签里，绑定自定义的colorScheme即可生效：

<ngx-charts-heat-map
  [results]="yourHeatMapData"
  [xAxisLabel]="'维度X'"
  [yAxisLabel]="'维度Y'"
  [colorScheme]="colorScheme"
></ngx-charts-heat-map>

如果使用的是ngx-charts预设的配色方案（比如vivid、cool），同样可以给配色对象添加reverse: true来反转映射逻辑。

内容的提问来源于stack exchange，提问作者David O'Brien