Highcharts - 突出显示两个 y 值之间的区域答案

【问题标题】：Highcharts - Area between two y values highlightedHighcharts - 突出显示两个 y 值之间的区域
【发布时间】：2012-07-25 09:36:54
【问题描述】：

我有一种情况，我需要预测时间序列中的趋势，并且必须显示置信区间。有没有办法将 Highcharts 中的两组 y 值绘制为链接，并在两者之间绘制阴影？像这样的：

http://www.psychosomaticmedicine.org/content/74/4/377/F2.large.jpg

我有五个时间序列：预测，两个限制更窄置信区间的时间序列，以及另外两个限制更宽置信区间的时间序列。

【问题讨论】：

标签： javascript graph highcharts area confidence-interval

【解决方案1】：

Highcharts 本身不支持范围图（从 2.2.5 版开始），但有一种解决方法。您可以将两个区域系列堆叠在一起，最前面的系列具有与图表背景匹配的背景颜色。

这里是示例 javascript（导致this chart）：

var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container', 
            defaultSeriesType: 'area'
        },
        title: {
            text: 'Range chart emulation'
        },
        xAxis: {
        },
        yAxis: {    
        },
        plotOptions: {
            area: {
                pointStart: 1940,
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                },
                lineWidth: 0,
                stacking: 'normal'
            }
        },
        series: [{
            // this series defines the height of the range
            name: 'Range',
            data: [1,2,3,5,7,8,9,6,4,7,5,3,4,7,6,5,6,7,5,4,2]
        }, {
            // this series defines the bottom values
            name: 'Dummy',
            data: [0,1,2,3,3.5,7,8.5,5,2.5,5.5,3,2,3,5.5,4,3,4,5.5,4,3.5,1.5],
            enableMouseTracking: false,
            showInLegend: false,
            fillColor: 'rgba(255, 255, 255, 0)'
        }]
    });
});

【讨论】：

所以我的想法是我将置信区间堆叠在一起，然后在其他所有内容之上绘制预测线？

【解决方案2】：

新的 Beta 版具有该功能：

see jsFiddle

您可以阅读更多关于即将推出的功能in this post.

【讨论】：