javascript - Highcharts - 具有负值的区域样条，区域应始终位于底部

Question

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

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') ]
              ]
        }
        }        

                ],

    });
});

但是，无论负值如何，我都需要橙色区域始终位于 X 轴和曲线之间。所以基本上我想将曲线“具有正值的区域”移动到零以下，但将填充区域保持在曲线下方。

无论如何，Highcharts 有可能吗？

谢谢。

Answer 1

我不完全理解你的问题。

要绘制大于零的值，您可以这样做，

        yAxis: {               
            min:0
        },

检查这个 fiddle :http://jsfiddle.net/LjL03o8h/5/