Highcharts柱形图中的最大条宽

Question

我正在使用Highcharts来创建一些垂直条(也就是"柱形图"),很像这里:highcharts.com/demo/column-basic

事实上,图表中有时会有30个条形图,有时只有两条条形图.然后在图表中有两个非常宽的条形图,它看起来很奇怪,因此决定设置条形图的最大宽度.这样,如果只有两个,那么它们就不会比50px宽,但如果有50个,那么Highcharts可以按它认为合适的方式调整它们的大小.

所以我的问题是Highcharts没有办法明确设置列的最大宽度.有人找到了解决方案吗？

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

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上的演示.

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/