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/

Answer 4

建議采用更好的方法

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

檢查這個小提琴

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

加上

     series: {
                 pointWidth: 20
             }

在你繪制選項，就是這樣。 :)享受歡呼......

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/

Answer 6

我使用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();
}

因此，如果在某個寬度上有一個條形，則將調整間距並將圖形繪制得更小。

這不會改變容器的大小，但會將條形保持在特定大小以下，並且不會影響pointPadding和groupPadding。

您可以使用spacingRight執行相同操作，並且可以使用一致的圖表，條形之間沒有難看的空格。

Answer 7

在我的例子中，將pointRange設置為1是我所需要的。 如果帶有框的類別與沒有框的類別（僅散布系列中的異常值）相鄰，則框將比類別寬。

這是一個很好的解釋在這里 。

Answer 8

我使用HighCharts遇到了同樣的問題，這就是我修復它的方法！

- 為圖表創建一個包裝器div，其中包含一些最小寬度和overflow：auto。 （啟用水平滾動）

- 將每個條的“pointWidth”設置為所需的值。 （比方說，pointWidth：75）

- 現在根據條形數動態設置chartWidth。

使用chartWidth =（條數）*（pointWidth）* 2

因此，如果您有15個柱，chartWidth = 15 * 75 * 2 = 2250px，其中2用於創建更大的圖表寬度，以適應柱之間的間距。

- 以這種方式，你可以在可滾動圖表中有任意數量的相同寬度的條... ... :)