Question

我正在与Highcharts合作，遇到了一个我正在努力克服的问题。

我创建了一个jsfiddle，以便您可以看到我的问题：

这是我正在使用的代码：

$('#output-chart').highcharts({
        chart: { type: 'column' },
        title: { text: null },
        xAxis: { categories: ['Column 1', 'Column 2', 'Column 3', 'Column 4'] },
        yAxis: { allowDecimals: false, min: 0, labels: { format: '£{value}' }, title: { text: ''} },
        plotOptions: { column: { stacking: 'normal'}, series: { pointWidth: 50, pointPadding: 0, groupPadding: 0} },
        series: [{
            name: 'Product 1 Element 1',
            data: [0, 100 - 125, 100 - 150, 100 - 175],
            stack: 'Item1'                
        }, {
            name: 'Product 1 Element 2',
            data: [100, 125, 150, 175],
            stack: 'Item1'                          
        }, {
            name: 'Product 2 Element 1',
            data: [0, 100 - 125, 100 - 150, 100 - 175],
            stack: 'Item2'                            
        }, {
            name: 'Product 2 Element 2',
            data: [100, 125, 150, 175],
            stack: 'Item2'                    
        }]
    });

因此，每列中有两个条形图，我想将这两个条形图相互对齐，但列之间仍有间隙。

我希望这是有道理的！

非常感谢任何帮助。

非常感谢

-G。

Answer 1

如果您想要一起使用条形图，但在它们之间也有填充，则只需设置pointPadding并且不要更改pointWidth。请参阅：http://jsfiddle.net/Fusher/FpKjQ/16/

Answer 2

你可以使用groupPadding：0.1然后它会更接近。

Highcharts中的列间距

2 个答案: