Highchart - как контролировать разрыв между сериями - PullRequest
1 голос
/ 17 апреля 2020

В Highcharts как я могу контролировать разрывы между категориями?

Я выделил область, о которой я говорю, синим цветом ниже: enter image description here

Я хочу, чтобы гапсы в моей старшей диаграмме выглядели как эта версия PowerPoint слева внизу. Полоски в PowerPoint go вплоть до конца области графика, но у высоких графиков есть этот большой разрыв.

enter image description here

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

1 Ответ

1 голос
/ 19 апреля 2020

Вам необходимо отредактировать 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...