Apache Superset Handlebar图表自定义数据格式化求助

一、Handlebar模板代码 #

假设你的数据字段为metric_value，先定义数值阈值（可根据实际需求调整）：

• 高：metric_value > 80
• 中等：50 ≤ metric_value ≤ 80
• 低：metric_value < 50

模板代码如下：

<table class="custom-handlebar-table">
  <thead>
    <tr>
      <th>指标名称</th>
      <th>指标值</th>
    </tr>
  </thead>
  <tbody>
    {{#each records}}
    <tr>
      <td>{{metric_name}}</td>
      <td class="{{#if (gt metric_value 80)}}high-value{{else if (and (gte metric_value 50) (lte metric_value 80))}}medium-value{{else}}low-value{{/if}}">
        {{metric_value}}
        {{#if (gt metric_value 80)}}
          <span class="arrow">↑</span>
        {{else if (and (gte metric_value 50) (lte metric_value 80))}}
          <span class="arrow">→</span>
        {{else}}
          <span class="arrow">↓</span>
        {{/if}}
      </td>
    </tr>
    {{/each}}
  </tbody>
</table>

注：如果需要使用图片箭头而非Unicode符号，可将<span class="arrow">↑</span>替换为<img src="你的箭头图片base64编码或Superset可访问的图片路径" class="arrow-img">

二、自定义CSS样式 #

在Superset图表的「自定义CSS」配置栏中添加以下样式：

.custom-handlebar-table {
  width: 100%;
  border-collapse: collapse;
}

.custom-handlebar-table th, .custom-handlebar-table td {
  padding: 8px 12px;
  text-align: left;
  border: 1px solid #ddd;
}

/* 高数值样式 */
.high-value {
  background-color: #ffebee;
  color: #c62828;
  font-weight: bold;
}

/* 中等数值样式 */
.medium-value {
  background-color: #fff3e0;
  color: #ef6c00;
}

/* 低数值样式 */
.low-value {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.arrow {
  margin-left: 8px;
  font-size: 16px;
}

/* 如果用图片箭头，添加以下样式 */
.arrow-img {
  width: 16px;
  height: 16px;
  margin-left: 8px;
  vertical-align: middle;
}

三、配置说明 #

1. 替换模板中的字段名：将metric_name和metric_value替换为你实际的数据字段
2. 调整阈值：根据业务需求修改gt 80、gte 50等判断条件
3. 样式自定义：可修改CSS中的背景色、字体颜色、间距等参数，匹配你的仪表盘风格

内容的提问来源于stack exchange，提问作者NishantM