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
        },

检查这个小提琴：http://jsfiddle.net/LjL03o8h/5/

Answer 2

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

plotOptions: {
    area: {
        threshold: null
    }
}

Answer 3

只需检查this answer，它可能会对您有所帮助。另外，由于您在同一系列中都具有负片正片，因此您可能需要检查this和this。

Highcharts - 带负值的areapline，面积应始终位于底部

3 个答案: