如何创建突出显示顶部区域的 highcharts 区域？答案

【问题标题】：how to create a highcharts area with the top area highlighted?如何创建突出显示顶部区域的 highcharts 区域？
【发布时间】：2018-03-26 23:06:06
【问题描述】：

highcharts 中的区域默认突出显示底部区域。

我想突出显示顶部区域。

有推荐的方法吗？

基于this demo，我可以将阈值更改为250以获得类似的结果（如我的期望所示）

我能想到的唯一解决方案是：

找出所有数据点的最大值。
让MAX = k * y_max。（k 是一个自定义因子，比如 1.2；为了获得更好的结果，还需要y_min 来动态获得一个合适的k）
使用以下配置。

yAxis: {
   max: MAX 
},
plotOptions: {
    series: {
        threshold: MAX 
    }
}

但这需要一些js计算，我想知道highcharts是否支持这个。

更新：

我想我最好在这里陈述我最初的问题。我想支持 3 种类型的区域：

在上限和下限内
低于下限
高于上限

我用 arearange 实现了第一个。但是 arearange 不支持缺少上限/下限；如果缺少一个边界，它将完全删除阈值。

有没有办法避免自己计算threshold 设置？

【问题讨论】：

你提出的解决方案看起来很优雅 - 我建议同样的事情。
怎么不加评论就投了反对票？

标签： javascript highcharts highstock

【解决方案1】：

使用 CSS 你可以获得与你的图片相似的东西：

Highcharts.chart('container', {
    chart: {
        type: 'area'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        color: '#ff0000',
        fillColor: '#ffffff',
        fillOpacity: 1
    }]
});

.highcharts-plot-background {
  fill:rgba(255,0,0,0.5);
}

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

或使用threshold 和negativeColor 几乎相同：

Highcharts.chart('container2', {
    chart: {
        type: 'area'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        color: "#FF0000",
        fillColor: '#f00000',
        fillOpacity: 0.5,
        threshold: 300,
        negativeColor: '#f00000',
        negativeFillColor: 'rgba(255,0,0,0.5)'
    }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container2" style="height: 400px"></div>

这是一个小提琴：http://jsfiddle.net/beaver71/0sameLb6/

【讨论】：

我不能使用 css 解决方案，因为可能有多个区域。让我试试负色。
感谢您的解决方案。如果我想考虑这 3 种情况，我必须将 arearange 用于 case 1，将 area 用于 case 2 & 3？只是想知道是否有更好的解决方案。 highcharts 不支持部分阈值很痛苦。 jsfiddle.net/Richard_Liu/o8wmzw0a/2

【解决方案2】：

感谢@TorsteinHonsi。

我发布了issue，@TorsteinHonsi 迅速回复并提交了change。 area 很快就会支持-Infinity/Infinity。

【讨论】：