web-dev-qa-db-fra.com

Highcharts: assurez-vous que la valeur de l'axe des y est au bas du graphique

Je suis en train de sortir une série de highcharts sur une page. Dans certains cas, toutes les données pour la période spécifiée peuvent revenir avec des valeurs 0.

Dans un tel cas, le graphique ressemble à ceci: http://jsfiddle.net/charliegriefer/KM2Jx/1/

Il y a seulement 1 étiquette d'axe y, 0, et elle est au milieu du graphique.

Je voudrais forcer cette valeur 0 pour l'axe y à être au bas du graphique, ce qui serait cohérent avec les autres graphiques de la page qui ont des données.

J'ai essayé diverses propriétés yAxis, telles que "min: 0", "minPadding: 0", "maxPadding: 0", "startOnTick: true".

On dirait que ça devrait être assez simple, mais je suis désemparé :(

Code yAxis pertinent:

yAxis: {
    min: 0, 
    minPadding: 0, 
    startOnTick: true, 
    title: {
        text: ""
    }
},
highcharts
30
charliegriefer

La seule façon dont je pouvais le faire montrer "correctement" était également en fournissant une valeur yAxis max. Je pense que c'est un problème de HighCharts lorsque vous ne fournissez aucun élément de données avec une valeur y. Il tire le meilleur graphique qu'il pense pouvoir.

12
wergeld

J'ai trouvé une autre solution (très simple):

Vous pouvez définir la propriété minRange de l’axe des y:

yAxis: {
    ...
    minRange : 0.1
}

Highcharts rend les valeurs yAxis min et max lorsque toutes les données sont à 0.

METTRE À JOUR:

Le correctif Highcharts 4.1.9 nécessite également:

        plotOptions: {
            line: {
                softThreshold: false
            }
        }

mis à jour js fiddle

40
BobTheBuilder

J'avais également posté ceci sur le forum HighCharts, où j'ai reçu une réponse qui semble fonctionner. Malheureusement, il faudra que je fasse un certain traitement des données avant de rendre les graphiques afin de vérifier toutes les valeurs de données "0" ... mais ça va marcher. J'aimerais juste que quelque chose de plus "intégré" à HighCharts.

Donc, après avoir résumé les valeurs "y", si j’obtiens 0, les propriétés de l’axe des y devraient ressembler à ceci:

yAxis: {
    minPadding: 0, 
    maxPadding: 0,         
    min: 0, 
    max:1,
    showLastLabel:false,
    tickInterval:1,
    title: {
            text: ""
    }
}

Voir: http://jsfiddle.net/KM2Jx/2/

Les clés semblent être les propriétés "max" et "showLastLabel".

4
charliegriefer

Voici un correctif que je propose qui ne nécessite aucun traitement préalable des données et qui permet simplement à Highcharts de le faire, comme avant la mise à jour. http://jsfiddle.net/QEK3x/ 

if(chart.yAxis[0].dataMax === 0)
{
   chart.yAxis[0].setExtremes(0, 5);
}

Il vous suffit de vérifier le premier axe de la série, car si le premier n'est pas 0, le problème ne se produira pas. Je pourrais soumettre une demande d'extraction à ce sujet aux graphiques supérieurs, bien que je sois un peu comme s'ils étaient destinés à cette fonctionnalité pour une raison quelconque. 

3
Ciarán

Depuis Highcharts 5.0.1, vous pouvez également utiliser softMax.

softMax: Number
Un maximum doux pour l'axe. Si le maximum des données de la série est supérieur, l'axe reste à ce maximum, mais si le maximum des données de la série est supérieur, l'axe se pliera pour afficher toutes les données.

yAxis: {
    min: 0,
    softMax: 100,
    ...
}

Voici un exemple avec un graphique à colonnes: http://jsfiddle.net/84LLsepj/

Notez qu'actuellement, dans Highcharts 5.0.7, cela ne semble pas fonctionner pour tous les types de graphiques. Comme vous pouvez le voir dans cet autre jsfiddle , cela ne fonctionne pas avec les graphiques en courbes.

2
Yorick Hermieu

minRange: 1 ou quoi que vous pensiez être affiché en fractions de
softMax: 100 ou tout ce que vous ressentez

 Result 

yAxis: {
         minRange : 1,
         softMax: 100
       }
0
Praveen

Pour Highcharts 5.x.x, vous devriez pouvoir spécifier:

yAxis: {
  softMin: 0,
  softMax: 1,
};

Cela ne fonctionnera pas pour le graphique en courbes, ce qui nécessite que vous définissiez également minRange dans le même objet de configuration que ci-dessus. Expérimentez avec différentes valeurs, en définissant par exemple minRange: 6, créez une plage sur yAxis comprise entre 0 et 4.

0
Maciej Gurban

Il suffit d'ajouter l'option "min"

yAxis: {
   min: 0
}
0
benjamingranados