Highchart-如何控制系列之间的间隔

Posted 2021-04-12

在Highcharts中，如何控制类别之间的差距？

我在下面用蓝色突出显示了我正在谈论的区域：

我想使我的图表图表差距看起来像下面左侧的PowerPoint版本。 PowerPoint中的条形图一直到绘图区域的尽头，但是高图有很大的差距。

https://jsfiddle.net/15u0r64s/

    Highcharts.chart('container', {
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Historic World Population by Region'
        },
        subtitle: {
            text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
        },
        xAxis: {
            categories: ['Total', 'Male', 'Female', 'Other'],
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Population (millions)',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        tooltip: {
            valueSuffix: ' millions'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 80,
            floating: true,
            borderWidth: 1,
            backgroundColor:
                Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
            shadow: true
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Total',
            data: [10, 20, 31, '']
        }, {
            name: 'Male',
            data: [10, 20, 60, 2]
        }, {
            name: 'Female',
            data: [10, 20, 61, '']
        }, {
            name: 'Other',
            data: [10, 20, 65, 4]
        }]
    });

答案

您需要编辑groupPadding和pointPadding属性：

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

---

实时演示： https://jsfiddle.net/BlackLabel/oqpxmL18/

API参考：

https://api.highcharts.com/highcharts/series.bar.groupPadding

https://api.highcharts.com/highcharts/series.bar.pointPadding