Highcharts, как мне сохранить пространство между сериями одинаковым, но увеличить пространство между категориями?

Question

У меня есть столбчатая диаграмма старших графиков, вот для нее jsFiddle . Я хочу сохранить промежуток между сериями, как он есть - действительно близко друг к другу, не касаясь. Но я бы хотел увеличить расстояние между категориями, чтобы они были более различимы. Я попытался поиграть с точечной панелью и группировкой, но все, что я пробовал, хочет увеличить / уменьшить расстояние между всеми столбцами. Есть идеи?

      plotOptions: {
        column: {
          borderRadius: 5,
          dataLabels: {
            enabled: true,
          },
          groupPadding: 0,
          pointWidth: 45,
        },
      },

Answer 1

В API Highcharts мы можем прочитать:

pointWidth: число

Значение пикселя, указывающее фиксированную ширину для каждого столбца или столбца. когда null, ширина вычисляется из pointPadding и groupPadding.

По умолчанию не определено.

Таким образом, в этой ситуации pointPadding и groupPadding могут не соблюдаться, но вы можете создать свою собственную функцию для позиционирования столбцов, например:

    events: {
        render: function() {
            var series = this.series;
            if (redrawEnabled) {
                if (this.chartWidth > 600) {
                    if (this.options.plotOptions.column.grouping) {
                        redrawEnabled = false;

                        this.update({
                            plotOptions: {
                                column: {
                                    grouping: false
                                }
                            }
                        });

                        redrawEnabled = true;
                    }

                    series.forEach(function(s, i) {
                        s.points.forEach(function(p) {
                            if (i === 0) {
                                p.graphic.attr({
                                    translateX: 25
                                });

                                p.dataLabel.attr({
                                    translateX: p.dataLabel.translateX + 25
                                });

                            } else {
                                p.graphic.attr({
                                    translateX: -25
                                });

                                p.dataLabel.attr({
                                    translateX: p.dataLabel.translateX - 25
                                });
                            }
                        });
                    });
                } else {
                    if (!this.options.plotOptions.column.grouping) {
                        redrawEnabled = false;

                        this.update({
                            plotOptions: {
                                column: {
                                    grouping: true
                                }
                            }
                        });

                        redrawEnabled = true;
                    }
                }
            }

        }
    }

Демонстрация в реальном времени: https://jsfiddle.net/BlackLabel/hvqs4juy/