web-dev-qa-db-ja.com

Highcharts縦棒グラフの最大バー幅

Highchartsを使用して、次のような縦棒（別名「縦棒グラフ」）を作成しています： highcharts.com/demo/column-basic

事柄は、チャートに30本のバーがある場合もあれば、2本しかない場合もあります。グラフの2つの実際に幅の広いバーがある場合、それは本当に奇妙に見えます。そのため、バーの最大幅を設定することにしました。そうすれば、2つしかない場合は、たとえば50pxよりも広くなりませんが、50がある場合、Highchartsは、適切に見えるようにサイズを設定できます。

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

javascripthighcharts
20
rusty

更新：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のデモを参照してください。

16
Brock Adams

明らかにこの質問はこの機能が存在しないときにずっと前に尋ねられましたが、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

19
Adam Goodwin

究極のソリューションは、各ポイントの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/

12
Paweł Fus

より良い方法が提案されているでしょう

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
             }

あなたはオプションをプロットし、それで終わります。 :)乾杯をお楽しみください...

4
Rinzler
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/

1
subbu

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

良い説明があります ここ 。

0
Aaron

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

-グラフのラッパーdivを作成します。最小幅とオーバーフロー：autoを指定します。 （横スクロールを有効にするには）

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

-バーの数に基づいて、chartWidthを動的に設定します。

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

したがって、15本の棒がある場合、chartWidth = 15 * 75 * 2 = 2250pxです。2は、棒の間隔を調整するために、より大きなグラフ幅を作成するために使用されます。

-このようにして、スクロール可能なチャートに同じ幅のバーをいくつでも配置できます... :)

0
Harish

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

したがって、特定の幅に1つのバーがある場合、間隔は調整され、グラフは小さく描画されます。

これはコンテナのサイズを変更しませんが、バーを特定のサイズの下に保ち、pointPaddingおよびgroupPaddingは影響を受けません。

あなたはspacingRightで同じことをすることができて、棒の間の醜いスペースなしで一貫したチャートを持っているでしょう。

0
david