3

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

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

http://jsfiddle.net/gokninski/qkBsA/

这是我正在使用的代码：

$('#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。

4

2 回答 2

5

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

于 2013-08-22T10:26:23.557 回答
4

你可以使用 groupPadding: 0.1 那么它会更接近。

于 2013-08-22T10:25:51.397 回答