最大バー幅

Question

私はたくさんのここのようないくつかの垂直バー（別名「縦棒グラフ」）を作成するために、Highchartsを使用しています：highcharts.com/demo/column-basic

事は時々チャートの30本のバーが時々、ある、あります2つだけです。グラフの中に2つの本当に広いバーがあると、それは本当に奇妙に見えるので、バーの最大幅を設定するという決定が下されました。そうすれば、2つだけあれば50pxよりも幅が広がることはありませんが、50があればHighchartsはフィットすると見なすことができます。

私の問題は、Highchartsに明示的に列の最大幅を設定する方法がないことです。誰かがその解決策を見つけましたか？

Answer 1

更新： Highchartsバージョン4.1.8以降は、Adam Goodwin's answer, belowを参照してください。長年にわたり

---

---

、列の最大幅を設定する唯一の方法は、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); 
    } 
} 

See the demo at jsFiddle.

Answer 2

より良い方法を提案したことになる

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

あなたプロットオプションで

 series: { 
       pointWidth: 20 
      } 

を追加し、それをthatsの

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

このフィドルを確認してください。 :) ...

Answer 3

を歓声を楽しむ私は棒グラフで最大pointWidthを強制するspacingTop属性を使用：1バーは一定の幅にわたって存在する場合

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 4

究極のソリューションは、特に-X位置や幅、drawPointsをラップし、各点のshaperArgsを上書きすることです：

(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 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

私の場合、pointRangeを1に設定することが必要でした。ボックスのあるカテゴリがボックスのないカテゴリ（散布図の外れ値のみ）に隣接していた場合、ボックスはカテゴリよりも幅が広いでしょう。

hereという良い説明があります。

Answer 7

明らかに、この質問は、この機能が存在しなかったときに長い時間前に尋ねたが、HighchartsのようあなたがplotOptions.column.maxPointWidth設定を使用して、任意の回避策なしにこれを行うことができます4.1.8ました。以下は

$('#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 8

私はHighChartsを使用して同じ問題に直面した、これは私がそれを修正した方法です！

- 最小の幅とオーバーフローを持つグラフのラッパーdivを作成：auto。 （水平スクロールを有効にする）

- 各バーの "pointWidth"を必要な値に設定します。 （たとえば、pointWidth：75）

- 棒グラフの数に基づいてchartWidthを動的に設定します。

使用chartWidth =（バーの数）*（pointWidth）* 2

だから、あなたは15バールを持っている場合、chartWidth = 15 * 75大きなグラフの幅を作成するために使用される2 = 2250px * 2、バー間の間隔に対応する。このよう--in、あなたがスクロール可能なチャートに同じ幅の棒の任意の番号を持つことができ

... :)