Question

我有一个高图柱状图，这是jsFiddle。我想保持系列之间的空间-彼此真正靠近而不接触。但是，我想增加类别之间的间隔，以使它们是不同的类别更容易区分。我已经尝试过使用pointpadding和grouppadding了，但是我尝试的所有内容都希望增加/减少所有列之间的空间。有什么想法吗？

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

Answer 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/

Highcharts如何保持系列之间的空间不变，但增加类别之间的空间？

1 个答案: