Highcharts 我如何保持系列之间的空间相同但增加类别之间的空间？答案

【问题标题】：Highcharts how do i keep space between series the same but increase space between categories?Highcharts 我如何保持系列之间的空间相同但增加类别之间的空间？
【发布时间】：2018-11-08 16:16:22
【问题描述】：

我有一个 highcharts 柱形图，这里是 jsFiddle 。我想保持系列之间的空间原样——非常接近彼此而不接触。但我想增加类别之间的空间，以便更容易区分它们是不同的类别。我尝试过使用 pointpadding 和 grouppadding，但我尝试过的所有东西都想增加/减少所有列之间的空间。有什么想法吗？

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

【问题讨论】：

标签： highcharts

【解决方案1】：

在 Highcharts API 中我们可以阅读：

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/

【讨论】：

你是男人！谢谢你，正是我需要的！