highcharts - Set column position in Highcharts

Question

I'm truying to build a column chart where 1 series overlaps the other (2) series. I've attached a picture for better understanding.

Thanks for any help!

Answer 1

这样的事情是可能的，看看：http: //jsfiddle.net/rLskooht/

• set: grouping: false, zIndex: (eg) 10, pointPadding: 0.3 for on top series
• 第一个系列应该是最重要的

代码：

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'column'
    },
    xAxis: {
        categories: ['cat1', 'cat2']
    },
    series: [{
        grouping: false,
        data: [70, 50],
        pointPadding: 0.3,
        zIndex: 10
    },{
        data: [123, 100]        
    },{
        data: [100, 90]        
    }]
});

Answer 2

是的！有一种方法可以通过每个条的自定义定位来做到这一点，如果上面这个简单但优雅的解决方案不够用，未来的用户可能会需要这种方法。

http://www.highcharts.com/demo/column-placement

代码：

请注意基于百分比pointPosition和pointPadding选项。

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Efficiency Optimization by Branch'
        },
        xAxis: {
            categories: [
                'Seattle HQ',
                'San Francisco',
                'Tokyo'
            ]
        },
        yAxis: [{
            min: 0,
            title: {
                text: 'Employees'
            }
        }, {
            title: {
                text: 'Profit (millions)'
            },
            opposite: true
        }],
        legend: {
            shadow: false
        },
        tooltip: {
            shared: true
        },
        plotOptions: {
            column: {
                grouping: false,
                shadow: false,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Employees',
            color: 'rgba(165,170,217,1)',
            data: [150, 73, 20],
            pointPadding: 0.3,
            pointPlacement: -0.2
        }, {
            name: 'Employees Optimized',
            color: 'rgba(126,86,134,.9)',
            data: [140, 90, 40],
            pointPadding: 0.4,
            pointPlacement: -0.2
        }, {
            name: 'Profit',
            color: 'rgba(248,161,63,1)',
            data: [183.6, 178.8, 198.5],
            tooltip: {
                valuePrefix: '$',
                valueSuffix: ' M'
            },
            pointPadding: 0.3,
            pointPlacement: 0.2,
            yAxis: 1
        }, {
            name: 'Profit Optimized',
            color: 'rgba(186,60,61,.9)',
            data: [203.6, 198.8, 208.5],
            tooltip: {
                valuePrefix: '$',
                valueSuffix: ' M'
            },
            pointPadding: 0.4,
            pointPlacement: 0.2,
            yAxis: 1
        }]
    });
});