Apache Superset折线图能否标记高亮区域？是否需自定义图表？

之前靠粗注释线实现区间高亮的方法，确实会因为Y轴缩放失效，试试这几个更靠谱的解决方案：

方案1：自定义SQL生成区间字段，叠加面积图 #

直接在数据源SQL里生成对应区间的数值字段，用面积图叠在折线下方，Y轴缩放时会自动适配范围：

• 修改SQL，新增三个区间字段（阈值根据实际需求调整）：

SELECT
  time_col,
  voltage,
  -- 低电压区间（示例阈值<180）
  CASE WHEN voltage < 180 THEN voltage ELSE NULL END AS low_voltage,
  -- 临界电压区间（示例阈值180<=电压<200）
  CASE WHEN voltage >=180 AND voltage <200 THEN voltage ELSE NULL END AS critical_voltage,
  -- 正常电压区间（示例阈值>=200）
  CASE WHEN voltage >=200 THEN voltage ELSE NULL END AS normal_voltage
FROM your_device_table

• 新建图表选择「折线图+面积图」组合，将原始voltage设为折线系列，三个区间字段设为面积系列，给每个面积设置不同的填充颜色，就能实现跟随Y轴自动适配的区间高亮效果。

方案2：用自定义JS绘制自适应背景色块 #

Superset默认基于ECharts渲染图表，可通过自定义JS代码自动计算Y轴区间的像素位置，绘制适配的背景色块：

• 编辑图表时找到「高级」选项卡，在「JavaScript代码」框中粘贴以下代码（注意修改阈值）：

function onChartRendered(chart) {
  const yAxis = chart.getOption().yAxis[0];
  const lowThreshold = 180; // 低电压阈值
  const criticalThreshold = 200; // 临界电压阈值
  
  // 将电压阈值转换为图表上的像素位置
  const lowY = chart.convertToPixel({seriesIndex: 0}, [0, lowThreshold])[1];
  const criticalY = chart.convertToPixel({seriesIndex: 0}, [0, criticalThreshold])[1];
  const chartHeight = chart.getDom().offsetHeight;
  
  // 添加三个区间的背景色块
  chart.setOption({
    graphic: [
      {type: 'rect', left:0, top:lowY, right:0, bottom:chartHeight, style:{fill:'rgba(255,0,0,0.2)'}},
      {type: 'rect', left:0, top:criticalY, right:0, bottom:lowY, style:{fill:'rgba(255,255,0,0.2)'}},
      {type: 'rect', left:0, top:0, right:0, bottom:criticalY, style:{fill:'rgba(0,255,0,0.2)'}}
    ]
  });
}

• 保存后，图表每次渲染都会自动根据当前Y轴范围计算区间位置，绘制适配的背景色块，Y轴缩放时不会失效。

方案3：热力图+折线图组合 #

用热力图展示电压区间分类，上方叠加折线图显示实时电压，同样能适配Y轴变化：

• 修改SQL生成区间分类字段：

SELECT
  time_col,
  voltage,
  CASE 
    WHEN voltage < 180 THEN '低电压'
    WHEN voltage >=180 AND voltage <200 THEN '临界电压'
    ELSE '正常电压'
  END AS voltage_level
FROM your_device_table

• 先创建热力图，X轴选时间，Y轴选voltage_level，给每个区间设置对应颜色；再在仪表盘中添加折线图，调整位置覆盖在热力图上方，将折线图背景设为透明，即可同时展示区间高亮和电压折线。

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