Highcharts - areaspline with negative values, area

问题:

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.

回答1:

I don't fully understand your question.

To plot the values above zero, you can do something like this ,

        yAxis: {               
            min:0
        },

Check this fiddle:http://jsfiddle.net/LjL03o8h/5/

回答2:

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

plotOptions: {
    area: {
        threshold: null
    }
}

回答3:

Just check this answer, it might help you. Also because you have negative an positives both in same series, you might want to check this and this.