想要避免 highcharts 中每个堆叠条之间的间距？

Question

我正在使用 Highcharts，遇到了一个我正在努力克服的小问题。

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

http://jsfiddle.net/jo_pappi/0e5h8sts/3/[A]

如你所见

我可以在 highcharts 中实现上述格式，因为此图表是基于动态数据呈现的当单个组值到达时，highcharts 在条形之间留下如此多的 space。我在这里附上图片

代码

$('#container-one').highcharts({
    chart: {
        type: 'bar',
        events: {
            click: function (event) {
                console.log(event.pageX + ',' + event.pageY);
            }
        }
    },

    credits: {
        enabled: false
    },

    title: {
        text: 'Total fruit consumtion, grouped by gender'
    },

    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
        minPadding: 1.1,
        maxPadding: 1.1
    },

    yAxis: {
        allowDecimals: false,
        min: 0,
        title: {
            text: 'Number of fruits'
        }
    },

    tooltip: {
        enabled: false,
        formatter: function () {
            return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>' +
                'Total: ' + this.point.stackTotal;
        }
    },

    plotOptions: {
        // column: {
        //     stacking: 'normal'
        // }
        series: {
            pointWidth: 20,
            stacking: 'normal',
            borderWidth: 0,
            events: {
                click: function (event) {
                    //reloadFlash();
                    //$('#report').html('click on yAxis title');
                    console.log(event.pageX + ',' + event.pageY);
                }
            }
        }
    },

    series: [{
        name: 'John',
        color: 'rgba(89,89,89,1)',
        data: [5],                     // data: [5, 3, 4, 7, 4],
        stack: 'male',
        pointPadding: -0.0,
        pointPlacement: -0.0
    }, {
        name: 'Joe',
        color: 'rgba(255,95,215,1)',
        data: [3],                    // data: [3, 4, 4, 2, 2],
        stack: 'male',
        pointPadding: -0.0,
        pointPlacement: -0.0
    }, {
        name: 'Jane',
        color: 'rgba(217,116,0,1)',
        data: [2],                    // data: [2, 5, 6, 2, 1],
        stack: 'female',
        pointPadding: -0.0,
        pointPlacement: -0.0
    }, {
        name: 'Janet',
        color: 'rgba(155,215,255,1)',
        data: [3],        // data: [3, 0, 4, 4, 3],
        stack: 'female',
        pointPadding: -0.0,
        pointPlacement: -0.0
    }]

});

如何减少小节之间的 spaces？

如果更改图表的高度是一种解决方案，那么我该如何动态实现这一点？

Answer 1

你在用'pointWidth: 20'串联什么？这就是问题所在。您还给出了 类别：['Apples'、'Oranges'、'Pears'、'Grapes'、'Bananas'] 即使数据仅来自苹果。一种解决方案是动态生成类别。例如，如果数据仅来自苹果，则仅将苹果推送到类别数组中。然后你可以使用 :

 _chart.setSize(width,height)

动态设置高图新高度和宽度的方法。也删除 pointWidth 将解决问题...

Answer 2

您可以使用的选项是：

plotOptions:{
    bar:{
        pointPadding: 0,
        groupPadding: 0,
    }
}

但是你也不需要强迫你的条点宽度。

删除：

series: {
            pointWidth: 20,

http://jsfiddle.net/d9f8b22x/

API 文档讨论了这些选项如何相互关联：

http://api.highcharts.com/highcharts#plotOptions.column.pointPadding

Answer 3

删除 "pointWidth" 解决了条形之间的白色 space。但是我需要在所有可能的情况下，条形图都应该处于相同的高度。我通过根据类别计数动态设置高度解决了这个问题。例如，如果我 只有一个类别，我将图表的高度设置为“210”，将 2 个类别的高度设置为“270”。并删除了 pointWidth.

$('#container-one').highcharts({

    chart: {
        type: 'bar',
        height: 210,
        ...
        .
        .
    plotOptions: {
        bar: {
            pointPadding: 0,
            borderWidth: 0
        },
        series: {
            //pointWidth: 20,
            stacking: 'normal',
        .
        .
});

当我有两个类别时，我将图表高度设置为 270

$('#container-two').highcharts({

    chart: {
        type: 'bar',
        height: 270,
        ...
        .
        .
    plotOptions: {
        bar: {
            pointPadding: 0,
            borderWidth: 0
        },
        series: {
            //pointWidth: 20,
            stacking: 'normal',
        .
        .
});

和Fiddle Link

可能是我做错了。但它解决了我的问题。不对请指正

谢谢大家

想要避免 highcharts 中每个堆叠条之间的间距？

Want to avoid spacing between each stacked bars in highcharts?

javascript

jquery

html

css

highcharts