Highcharts规格有两个yAxis和相关尺寸

时间:2015-03-18 12:18:19

标签: highcharts

我有一个带有两个y轴的仪表图。第二轴的尺寸应为第一轴的50%。我知道偏移属性,但我只能将数字设置为值。有没有办法做到这一点?

这是一个小提琴。内蓝圈应该是外圈的一半。

http://jsfiddle.net/jhpbc176/

$('#container').highcharts({
            chart: {
                type: 'gauge',
                alignTicks: false,
                plotBackgroundColor: null,
                plotBackgroundImage: null,
                plotBorderWidth: 0,
                plotShadow: false
            },

            title: {
                text: null
            },

            tooltip: {
                enabled: false
            },

            pane: {
                startAngle: -70,
                endAngle: 70,
                background: null
            },

            plotOptions: {
                gauge: {
                    dial: {
                        baseWidth: 2,
                        baseLength: '100%',
                        radius: '100%',
                        rearLength: 0
                    },
                    pivot: {
                        radius: 5
                    },
                    dataLabels: {
                        enabled: false
                    }
                }
            },

            yAxis: [ {
                min: -300,
                max: 500,
                tickPositions: [-300, -200, -100, 0, 100, 200, 300, 400, 500],
                lineColor: '#933',
                lineWidth: 0,
                minorTickPosition: 'outside',
                tickLength: 0,
                minorTickLength: 0,
                labels: {
                    distance: 12,
                },
                offset: 0,
                plotBands: [{
                    from: -300,
                    to: 2,
                    thickness: 15,
                    color: '#55BF3B'
                }, {
                    from: 0,
                    to: 202,
                    thickness: 15,
                    color: {
                        linearGradient: {x1: 0, x2: 1, y1: 0, y2: 0},
                        stops: [
                            [0, '#55BF3B'],
                            [1, '#DDDF0D']
                        ]
                    }
                }, {
                    from: 200,
                    to: 500,
                    thickness: 15,
                    color: {
                        linearGradient: {x1: 0, x2: 1, y1: 0, y2: 0},
                        stops: [
                            [0, '#DDDF0D'],
                            [1, '#ff0000']
                        ]
                    }
                }]
            }, {
                min: -200,
                max: 200,
                lineColor: '#339',
                tickColor: '#339',
                minorTickColor: '#339',
                offset: -100,
                lineWidth: 2,
                labels: {
                    enabled: false
                },
                tickLength: 0,
                minorTickLength: 0,
                endOnTick: false
            }],

            series: [{
                data: [250]
            }]
        });

1 个答案:

答案 0 :(得分:0)

我想到的最简单的方法是将图表容器除以4,然后你将达到图表高度的50%。

offset: (function(){
    return -1 * ($('#container').height()/4);
})(),

示例:http://jsfiddle.net/jhpbc176/1/