Chartist.js实现阈值上下区域填充不同样式的方案咨询

需求说明 #

用于洪水位预警系统的折线图需实现：阈值（0值）以上代表洪水状态，折线与阈值线之间的封闭区域填充红色高亮；阈值以下代表安全状态，仅保留折线展示不做区域填充。

当前实现效果 #

目标实现效果 #

实现方案 #

该需求可以直接基于现有threshold插件实现，无需引入额外依赖，仅需调整配置和添加CSS规则即可：

1. 调整图表配置 #

打开配置中被注释的showArea: true，启用区域填充功能：

new Chartist.Line('.ct-chart', {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    series: [
        [5, -4, 3, -7, -10, -2, 3, 4, 0, -4, 6, -8]
    ]
}, 
{
    axisY: {
        onlyInteger: true
    },
    width: 600,
    height: 400,
    showArea: true, // 启用区域填充
    lineSmooth: false,
    low: -15,
    plugins: [
        Chartist.plugins.ctThreshold({
            threshold: 0
        })
    ]
});

2. 添加样式控制规则 #

threshold插件会自动给阈值上下的图形元素添加ct-threshold-above和ct-threshold-below类名，通过类选择器隐藏阈值下方的区域填充即可：

/* 阈值上方样式：红色折线+半透明红色填充 */
.ct-threshold-above.ct-line, 
.ct-threshold-above.ct-point {
  stroke: #f03838;
}
.ct-threshold-above.ct-area {
  fill: #f03838;
  fill-opacity: 0.4;
}

/* 阈值下方样式：绿色折线+透明填充 */
.ct-threshold-below.ct-line, 
.ct-threshold-below.ct-point {
  stroke: #2da44e;
}
.ct-threshold-below.ct-area {
  fill: transparent;
}

实现原理 #

ctThreshold插件会自动将折线按阈值切割为独立的上下两部分，对应的区域填充也会生成独立路径元素，仅需将下方区域的填充属性设置为透明，就能保留阈值上方的高亮填充效果，完全匹配预警场景的展示需求。

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