Question

我正在尝试构建一个柱形图，其中1系列与其他（2）系列重叠。我附上了一张图片以便更好地理解。

感谢您的帮助！

enter image description here

Answer 1

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

set：grouping：false，zIndex :(例如）10，pointPadding：0.3 for top top
第一个系列应该是最重要的

代码：

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

在Highcharts中设置列位置

2 个答案: