web-dev-qa-db-fra.com

HighCharts pleine largeur

J'essaie de faire en sorte que mon diagramme de rendu remplisse 100% de la division parente sans succès. Y at-il un moyen de supprimer l’écart à gauche et à droite?

http://jsfiddle.net/sKV9d/

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'chart',
        margin: 0,
        width: 300,
        height: 200,
        defaultSeriesType: 'areaspline'
    },    

    series: [{
        data: [33,4,15,6,7,8, 73,2, 33,4,25],    

        marker: {
            enabled: false
        }
    }]
});
javascriptjqueryhighcharts
9
user2341636

Si vous supprimez les options width: 300, height: 200 comme ceci:

    var chart = new Highcharts.Chart({
chart: {
    renderTo: 'chart',
    margin: 0,
    defaultSeriesType: 'areaspline'
},    

...

il remplira automatiquement le conteneur.

12
MISJHA

Le problème est dû à l'interface utilisateur de jquery. Après avoir rendu votre graphique, appelez ce code pour le rediffuser. Cela a résolu mon problème

chart.reflow();
10
philip mudenyo

Définissez minPadding et maxPadding sur 0, voir: http://jsfiddle.net/sKV9d/3/

6
Paweł Fus

Je l'ai résolu par

window.dispatchEvent(new Event('resize'));

UPD:

  1. supprimer les attributs de largeur et de hauteur.
  2. ajoutez dans le fichier .css le code suivant afin d’ajuster le bloc graphique à 100% de #container:

graphique {largeur: 100%; hauteur: 100%; }

2a. Une autre solution est la suivante: au cas où il serait impossible de définir la taille du conteneur pendant la "conception", vous pouvez redistribuer un graphique après son chargement (par exemple, appeler chart.reflow ();):

chart: {

    events: {
        load: function(event) {
        **event.target.reflow();**
      }
    }
},

Voir exemple http://jsfiddle.net/yfjLce3o/

5
Andriy B.

Essaye ça :

var height= $("#container").height();
var width= $("#container").width();

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'chart',
        margin: 0,
        width: width,
        height: height,
        defaultSeriesType: 'areaspline'
    },    

    series: [{
        data: [33,4,15,6,7,8, 73,2, 33,4,25],    

        marker: {
            enabled: false
        }
    }]
});
5
Duc Anh

Si vous ne fournissez pas la propriété width au graphique, il devrait automatiquement obtenir la largeur du conteneur . Supprimez simplement la largeur du graphique et donnez au conteneur width: 100%, ce qui devrait fonctionner.

Si vous souhaitez une largeur spécifique, modifiez simplement la largeur du conteneur en une taille spécifique. Le graphique devrait toujours être 100% de cette taille . JSFiddle

Exemple:

HTML

<div id="container">
    <div id="chart"></div>
</div>

JS

    var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'chart',
        margin: 0,
        height: 200,
        defaultSeriesType: 'areaspline'
    },

    series: [{
        data: [33,4,15,6,7,8, 73,2, 33,4,25],

        marker: {
            enabled: false
        }
    }]
});

CSS

#container {
    width: 100%;
    height: 200px;
}
1
Shahar

utilisez la fonction updateChart et appelez chart.reflow () à l'intérieur de cette fonction

scope.updatechart = function(){
     scope.chart.reflow();
}

appelez la méthode updatechart toutes les 30 secondes en utilisant un mécanisme d'actualisation quelconque

0
MukulChakane