Highcharts如何保持系列之间的空间不变，但增加类别之间的空间? [英] Highcharts how do i keep space between series the same but increase space between categories?

问题描述

我有一个图表图表，这里是 jsFiddle .我想保持系列之间的空间-彼此真正靠近而不碰触.但是，我想增加类别之间的间隔，以使其在不同类别之间更加明显.我已经尝试过使用pointpadding和grouppadding了，但是我尝试的所有内容都希望增加/减少所有列之间的空间.有什么想法吗?

I have a highcharts column chart, here is the jsFiddle for it. I want to keep the space between the series as it is -- really close to each other without touching. But I'd like to increase the space between the categories so that it's more distinguishable they are different categories. I've tried playing around with pointpadding and grouppadding but everything I've tried wants to increase/decrease the space between all the columns. Any ideas?

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

推荐答案

在Highcharts API中，我们可以读取:

In Highcharts API we can read:

pointWidth:数字

一个像素值，该值指定每列或每条的固定宽度.什么时候 如果为null，则根据pointPadding和groupPadding计算宽度.

A pixel value specifying a fixed width for each column or bar. When null, the width is calculated from the pointPadding and groupPadding.

默认为未定义.

因此在这种情况下，pointPadding和groupPadding不受尊重，但是您可以创建自己的函数来定位列，例如:

So in this situation pointPadding and groupPadding can be not respected but you can create your own function for positioning the columns, for example:

    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如何保持系列之间的空间不变，但增加类别之间的空间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！