web-dev-qa-db-fra.com

Largeur maximale des barres dans les graphiques à colonnes Highcharts

J'utilise Highcharts pour créer des barres verticales ("graphiques en colonnes"), un peu comme ici: highcharts.com/demo/column-basic

La chose est, parfois il y a 30 barres dans le graphique, parfois seulement deux. Où se trouvent alors deux barres très larges dans le graphique, cela semble vraiment bizarre, la décision a donc été prise de définir une largeur maximale pour les barres. De cette façon, s’il n’ya que deux personnes, elles ne seraient pas plus larges que, par exemple, 50 pixels, mais s’il y en avait 50, Highcharts pourrait les dimensionner à sa guise.

Mon problème est donc que Highcharts ne dispose pas d'un moyen de définir explicitement la largeur maximale des colonnes. Quelqu'un a-t-il trouvé une solution à cela?

javascripthighcharts
19
rusty

Mise à jour: À partir de la version 4.1.8 de Highcharts, voir la réponse de Adam Goodwin ci-dessous .

Pendant de nombreuses années, le seul moyen de définir la largeur maximale des colonnes était de manière dynamique via JavaScript.

Fondamentalement:

  1. Vérifiez la largeur de la barre actuelle.
  2. Si la valeur est supérieure à celle souhaitée, réinitialisez la série pointWidth.
  3. Forcer une mise à jour pour rendre la modification visible.

Quelque chose comme:

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


Voir la démo sur jsFiddle.

16
Brock Adams

Évidemment, cette question a été posée il y a longtemps quand cette fonctionnalité n'existait pas, mais à partir de Highcharts 4.1.8, vous pouvez le faire sans aucune solution de contournement en utilisant le paramètre 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... */
});

Vous trouverez ci-dessous le JSFiddle de l'exemple de graphique à colonnes de base, modifié pour illustrer ce fonctionnement:

http://jsfiddle.net/vu3dubhb/

Et la documentation pour ce paramètre est ici: http://api.highcharts.com/highcharts#plotOptions.column.maxPointWidth

18
Adam Goodwin

La solution ultime consiste à envelopper drawPoints et à écraser shaperArgs de chaque point, en particulier en position x et en largeur:

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

Utilisation:

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

Et démo en direct: http://jsfiddle.net/83M3T/1/

12
Paweł Fus

une meilleure façon serait a suggéré

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

vérifier ce violon

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

il suffit d'ajouter 

     series: {
                 pointWidth: 20
             }

dans vous tracer des options et c'est tout. :) profitez de la vôtre ...

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

Dans mon cas, régler pointRange sur 1 était ce dont j'avais besoin. Si une catégorie avec une case était adjacente à une catégorie sans case (uniquement les valeurs aberrantes dans une série de dispersion), la case serait plus large que la catégorie.

Il y a une bonne explication ici .

0
Aaron

J'ai rencontré le même problème en utilisant HighCharts et voici comment je l'ai corrigé !! 

- Créez un div wrapper pour le graphique, avec une largeur minimale et un dépassement: auto. (Pour activer le défilement horizontal)

- Définissez le "pointWidth" de chaque barre à la valeur requise. (disons, pointWidth: 75)

- Définissez maintenant la largeur de la largeur de la carte dynamiquement, en fonction du nombre de barres.

Utilisez chartWidth = (nombre de barres) * (pointWidth) * 2

Ainsi, si vous avez 15 barres, chartWidth = 15 * 75 * 2 = 2250px, où 2 est utilisé pour créer une largeur de graphique plus grande, afin de permettre un espacement entre les barres.

- De cette manière, vous pouvez avoir un nombre quelconque de barres de même largeur dans le graphique défilant ... :)

0
Harish

J'ai utilisé l'attribut spacingTop pour appliquer une largeur maximale de pointWidth sur un graphique à barres:

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

Donc, s'il y a une barre sur une certaine largeur, l'espacement sera ajusté et le graphique sera dessiné plus petit. 

Cela ne change pas la taille du conteneur mais maintient les barres sous une certaine taille et votre pointPadding et votre groupPadding ne seront pas affectés. 

Vous pouvez faire la même chose avec spacingRight et obtenir un graphique cohérent sans espaces vilains entre les barres.

0
david