Highcharts - 具有负值的地区线，面积应始终位于底部 [英] Highcharts - areaspline with negative values, area should be always at the bottom

问题描述

我想用Highcharts创建一个图表，带有负值，如下所示：

http://jsfiddle.net/vargapeti/LjL03o8h/3/

 <$ c $ {
图表：{
类型：'areaspline'
}，
（$ {
 $（'＃container'）。 title：{
 text：'具有负值的区域图'
}，
 yAxis：{
标题：{
 text：'value'
} 
}，
 plotOptions：{
 area：{
 dataLabels：{
 enabled：true 
}，
 stacked：'normal'$ 
系列：[{
名称：'具有负值的区域'，
数据：[[0，-7.0]，[1，6.9] ，[1.5,9.5]，[3，-6]]，
 fillCo lor：{
 linearGradient：[0,0,0,300]，
 stops：[
 [0，Highcharts.Color（'＃FFA500'）。setOpacity（1）.get 'rgba'）]，
 [1，Highcharts.Color（'＃ffffff'）。setOpacity（0.3）.get（'rgba'）] 
] 
} 
} ，
 {
名称：'有正值的区域'，
数据：[[0,13.0]，[1,26.9]，[1.5,29.5]，[3,14]] ，
 fillColor：{
 linearGradient：[0,0,0,300]，
 stops：[
 [0，Highcharts.Color（'＃d2d8df'）。setOpacity 1）.get（'rgba'）]，
 [1，Highcharts.Color（'＃ffffff'）。setOpacity（0.3）.get（'rgba'）] 
] 
} 
} 
 
]，
 
}）; 
}）; 
  

然而，我需要将橙色区域始终放置在X轴和曲线之间，而不管负值。所以基本上我想要将曲线正值的区域移动到零以下，但将曲线下面的填充区域保持不变。

$是$ $
$ b

class =h2_lin>解决方案

只需设置 threshold：null 为areaspline系列。例如： http://jsfiddle.net/LjL03o8h/6/

  plotOptions：{
 area：{
 threshold：null 
} 
} 
  




I would like to create a chart with Highcharts, with negative values, like this:

http://jsfiddle.net/vargapeti/LjL03o8h/3/

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'areaspline'
        },
        title: {
            text: 'Area chart with negative values'
        },
        yAxis: {
            title: {
                text: 'value'
            }
        },
        plotOptions: {
            area: {
                dataLabels: {
                    enabled: true
                },
                stacked: 'normal'
            }
        },
        series: [{
            name: 'Area with negative values',
            data: [[0, -7.0], [1, 6.9], [1.5, 9.5], [3, -6]],
            fillColor : {
              linearGradient : [0, 0, 0, 300],
              stops : [
                  [ 0, Highcharts.Color('#FFA500').setOpacity(1).get('rgba') ],
                  [ 1, Highcharts.Color('#ffffff').setOpacity(0.3).get('rgba') ]
              ]
        }
        },
        {
            name: 'Area with positive values',
            data: [[0, 13.0], [1, 26.9], [1.5, 29.5], [3, 14]],
            fillColor : {
              linearGradient : [0, 0, 0, 300],
              stops : [
                  [ 0, Highcharts.Color('#d2d8df').setOpacity(1).get('rgba') ],
                  [ 1, Highcharts.Color('#ffffff').setOpacity(0.3).get('rgba') ]
              ]
        }
        }        

                ],

    });
});

I need however, the orange area to be always between the X-axis and the curve, regardless of the negative values. So basically I want to shift the curve "Area with positive values" under zero, but keep the filled up area under the curve.

Is it possible with Highcharts anyhow?

Thank you.

解决方案

Simply set threshold: null for areaspline series. For example: http://jsfiddle.net/LjL03o8h/6/

plotOptions: {
    area: {
        threshold: null
    }
}

这篇关于Highcharts - 具有负值的地区线，面积应始终位于底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！