Highcharts柱状图中最大的条形宽度

Question

我正在使用Highcharts创建一些垂直条形图（也称“柱状图”），类似于这里的例子：highcharts.com/demo/column-basic

问题是，有时图表中会有30个条形，有时只有两个。当图表中有两个非常宽的条形时，看起来非常奇怪，因此决定设置条形的最大宽度。这样，如果只有两个条形，则它们不会超过50像素的宽度，但如果有50个条形，则Highcharts可以按照其自己的方式进行大小调整。

所以我的问题是，Highcharts没有一种明确设置列的最大宽度的方法。是否有人找到了解决方法？

- rusty

---

不是一个好的解决方案，但我所做的方法是在图表加载后检查点数，然后添加额外的（空白）点。 - escouser

Answer 1

显然，这个问题是在这个特性不存在的很久以前提出的，但是从Highcharts 4.1.8开始，你可以使用plotOptions.column.maxPointWidth设置轻松实现此功能，无需任何变通方法：

$('#container').highcharts({
    /* Other chart settings here... */
    plotOptions: {
        column: {
            /* Here is the setting to limit the maximum column width. */
            maxPointWidth: 50
        }
    }
    /* Other chart settings here... */
});

以下是基本柱状图示例的JSFiddle，经过修改以显示此操作：

http://jsfiddle.net/vu3dubhb/

此设置的文档在此处：http://api.highcharts.com/highcharts#plotOptions.column.maxPointWidth

- Adam Goodwin

---

这应该是被接受的答案 - 现在。在向下滚动并找到这个之前，几乎要使用解决方法了。 - MightyPork

Answer 2

更新: 截至Highcharts 4.1.8版本，可以查看下面的Adam Goodwin的答案.

---

---

多年来，设置列的最大宽度的唯一方法是通过JavaScript动态设置。

基本上：

1. 检查当前的柱状图宽度。
2. 如果它大于期望值，则重置系列的pointWidth。
3. 强制重绘以使更改可见。

类似如下：

var chart = new Highcharts.Chart ( { ... ...

//--- Enforce a Maximum bar width.
var MaximumBarWidth = 40; //-- Pixels.
var series          = chart.series[0];

if (series.data.length) {

    if (series.data[0].barW  >  MaximumBarWidth) {
        series.options.pointWidth = MaximumBarWidth;
        /*--- Force a redraw.  Note that redraw() will not 
            fire in this case!
            Hence we use something like setSize().
        */
        chart.setSize (400, 300);   
    }
}

请在 jsFiddle 上查看演示。

- Brock Adams

---

谢谢！那就是我们最终所做的事情。 - rusty

我不明白，你能否在页面加载时就执行它？大多数情况下，点击按钮是没有用的。:( - Rinzler

@Rinzler，当然可以在页面加载（或图形加载）时执行。如果您是指演示，则按钮只是为了让您看到随着减少的条数，条形不会变宽（否则会变宽）。如果您对此有疑问，请在您的应用程序中提出一个新问题。 - Brock Adams

Answer 3

最终的解决方案是包装drawPoints并覆盖每个点的shaperArgs，尤其是x位置和宽度：

(function(H) { 
    var each = H.each;
    H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function(proceed) {
        var series = this;
        if(series.data.length > 0 ){
            var width = series.barW > series.options.maxPointWidth ? series.options.maxPointWidth : series.barW;
            each(this.data, function(point) {
                point.shapeArgs.x += (point.shapeArgs.width - width) / 2;
                point.shapeArgs.width = width;
            });
        }
        proceed.call(this);
    })
})(Highcharts)

用途：

$('#container').highcharts({
    chart: {
      type: 'column'
    },
    series: [{
        maxPointWidth: 50,
        data: [ ... ]
    }]
});

这里是实时演示：http://jsfiddle.net/83M3T/1/

- Paweł Fus

---

这个答案被低估了。 - Aaron

这个对我来说完美运作，救了我的命。 - Neeraj Dubey

注意：在 v4.1.8+ 中，这是一个内置选项，无需使用上面的包装器 :) - Paweł Fus

Answer 4

一个更好的方法如建议所述。

http://highcharts.uservoice.com/forums/55896-general/suggestions/2079099-manually-set-the-column-width

检查这个 fiddle

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/column-pointwidth-20/

只需添加

     series: {
                 pointWidth: 20
             }

在您的图表选项中就可以了。 :) 祝您愉快，干杯...

- Rinzler

---

在那个 jsfiddle 中设置点宽度不起作用，因为20个点是默认的点宽度。 - Timothy Groote

哈哈 @TimothyGroote 这只是一个示例，您可以根据自己的需求进行更改。最后一次我使用它时它是有效的。我最近一直很忙。http://jsfiddle.net/7X3hn/ - Rinzler

-1 是因为问题是关于设置最大宽度，而不是硬编码一个固定的宽度以在所有情况下使用。 - zykadelic

Answer 5

function(chart){
        var series = chart.series[0];
        //--- Enforce a Maximum bar width
        if (series && series.data.length) {
            if (series.data[0].pointWidth  >  MaximumBarWidth) {
                for(var i=0;i< chart.series.length;i++)
                  chart.series[i].update({
                    pointWidth:MaximumBarWidth
                    });
            }
        }
    }

http://jsfiddle.net/pXZRV/40/

- subbu

Answer 6

在我的情况下，将 pointRange 设置为 1 就是我所需要的。如果一个带有框的类别与一个没有框的类别相邻（仅在散点系列中存在异常值），则框的宽度会比类别宽。

这里有一个很好的解释here。

- Aaron

Answer 7

我在使用HighCharts时遇到了同样的问题，以下是我解决的方法！

-- 为图表创建一个包装器div，设置一些最小宽度和overflow:auto。（以启用水平滚动）

-- 将每个条形图的"pointWidth"设置为所需值。（例如，pointWidth: 75）

-- 现在根据条形图的数量动态设置chartWidth。

使用chartWidth = (条形图的数量) * (pointWidth) * 2

因此，如果您有15个条形图，则chartWidth = 15*75*2 = 2250px，其中2用于创建更大的图表宽度，以容纳条形图之间的间距。

--通过这种方式，您可以在可滚动的图表中拥有任意数量的相同宽度的条形图... :)

- Harish

Answer 8

我使用了spacingTop属性来强制在柱状图上设置最大pointWidth：

if (series[0].data[0].pointWidth > maximumBarWidth) {
     this.options.chart.spacingTop = this.options.chart.height - (maximumBarWidth * series.length) - 30;
     this.isDirtyBox = true;
     this.redraw();
}

因此，如果某个宽度上有一个Bar，则会调整间距并绘制较小的图表。

这不会改变容器的大小，但保持条形图在一定大小范围内，您的pointPadding和groupPadding不会受到影响。

您可以使用spacingRight执行相同操作，并且将具有一致的图表而没有条之间的丑陋空间。

- david