web-dev-qa-db-fra.com

Comment afficher uniquement les entiers (sans décimales) dans les étiquettes des axes x/y de l'API de graphique

J'utilise un graphique à colonnes avec Google Chart JS Api. J'affiche des valeurs (total des commandes par jour) qui ne peuvent être représentées que par des entiers. 

Tout fonctionne bien, sauf que lorsque l'un des graphiques que je présente a des valeurs trop basses, telles que 1 ou 2, il commence à afficher les décimales sur l'axe des ordonnées. Les décimales ont l'air ridicules, car il est impossible d'avoir une "moitié" commande (c'est ce que je compte), et j'aimerais cacher cela si possible.

javascriptgoogle-visualization
23
jpswain

Remarque: veuillez consulter https://stackoverflow.com/a/16036721/390977 , car ma réponse est incorrecte. (Je ne peux pas le supprimer car il a été accepté.)

Dans vos options, vous pouvez spécifier le formatage des nombres pour la valeur chxs:

chxs: '0N*f0*',

Ceci utilise une valeur flottante (f) avec 0 décimale (f0).

Ref: Google Bar Styles d'étiquettes Axis chxs

1
Ian Hunter

Je n'ai pas assez de représentants pour répondre directement au message de Ian Hunter, mais cela permet de formater l'étiquette, mais ne définit pas les lignes de la grille sur la même valeur que l'étiquette, ce qui peut avoir des résultats indésirables. Alors disons que vous avez ces lignes de grille:

dix

7.5

5

2,5

Lorsque vous formatez l’étiquette pour n’afficher que les nombres entiers, elle affiche ceci: 10 8 5 3 0.

Mais alors, vos données sur le graphique ne correspondent pas aux étiquettes en échelle y. Par exemple, si vous avez une valeur de 3, cela indique réellement au-dessus les libellés "3" car le libellé "3" correspond en réalité à 2,5

Malheureusement, la seule solution à laquelle je pouvais penser était de surveiller les plages min/max des données affichées dans le graphique, puis d'appliquer une logique pour définir le min/max en fonction du nombre d'étiquettes à l'échelle y que j'ai. diviserait sans reste.

Donc, dans le cas ci-dessus, je le mettrais à 

        vAxis: { 
          viewWindow:{
            max:12,
            min:0
          }
        }

Cela donnerait des lignes de grille de 

12

8

6

4

Aucune décimale et aucun problème avec les données non corrélées avec les étiquettes du graphique.

26
BigBadMe

utiliser l'option 

vAxis: {format: '0'}

un péché

chart.draw(data, {
                   width: 800,
                   height: 480,
                   orientation: 'horizontal',
                   vAxis: {format: '0'}
                  }
           );
18
Thaer Mohazia

L'ajout de {format: 0} convertit les graduations à virgule flottante en nombres entiers, mais les valeurs réelles des barres apparaissent de manière incorrecte.

Le principal problème est que l'API Google Charts suppose que vous souhaitiez principalement cinq lignes de grille, qui risquent de ne pas donner de valeurs de ticks entières.

Ajouter ceci m'a donné de jolies valeurs de ticks ronds -

  gridlines: { count: -1}

source - https://groups.google.com/forum/#!topic/google-visualization-api/4qCeUgE-OmU

13
prad

si vous souhaitez que seules les valeurs entières soient affichées, vous devez tenir compte du fait que Google charts souhaite vous montrer au moins 5 lignes de grille. En supposant que tous doivent être entiers, donnez le graphique suivant:

vAxis: {  title: 'Orders Count',

                minValue: 4,                    
                viewWindow:{min:0}, /*this also makes 0 = min value*/         
                format: '0',                     
            },
4
Yevgeniy Afanasyev

La méthode la plus simple consiste à modifier l'axe vertical gauche, avec Min comme 0 et Max comme un multiple de 5 (5, 10, 15, etc.) en fonction du maximum attendu.

1
Bernie

Dans mon cas, j'ai des valeurs allant de 0 à 600.

  • si $ value est inférieur à 12: utilisez la valeur max pour vAxis.gridlines.count
  • si $ valeur est supérieure à 12: utilise le nombre de lignes de grille par défaut (4)

De cette façon, vous n'affichez que des «nombres entiers».

Vous devrez générer dynamiquement le javascript en dehors du cours.

Exemple de code:

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Fase', 'Closed', 'Open'],
        <?php
        $max = 0; // needed to determine the number of gridlines?
        $data = array();
        foreach($projectExecutions as $key => $pe){
            $totals = countOpenIssuesInProjectExecution($pe);
            $open = $totals['open'];
            $closed = $totals['closed'];
            $data[] = "['". $FASE[$pe['fase_id']] . "', " . $closed . ", ". $open . "]\r\n";
            // What are the Max values vor Open & Closed Defects
            if($open > $max ){ $max = $open; }
            if($closed > $max ){ $max = $closed; }
        }
        $nrOfGridLines = ($max >= 12 ? 4 : $max+1); // Calculate the number of gridlines
        echo implode(",",$data);
        ?>
    ]);
    var options = {
        legend: { position: 'bottom' }
        ,title: "Evolution Defects: Open -VS- Closed"
        ,colors:['#00a160','red']
        ,isStacked: true
        ,vAxis: {textPosition: 'in', minValue:0,viewWindow: { min: 0 }, gridlines: {count: <?php echo $nrOfGridLines; ?>} }

    };
    var chart = new google.visualization.AreaChart(document.getElementById('chart_defects'));
    chart.draw(data, options);
}
0
Cagy79

Pour ceux qui cherchent aussi la réponse, vous pouvez voir la réponse à cette question ici, qui utilise le format d’options . Impossible de formater Google Charts Axis en décimal

0
maximran

Je préfère l'option gridlines: { count: -1 }, mais vous pouvez toujours spécifier explicitement les valeurs souhaitées avec ticks. Ce qui est cool, c’est qu’ils n’ont même pas besoin d’être espacés de manière égale. Vous pouvez le faire [1, 10, 100, 200, 500, 1000] si vous le souhaitez:

options: { vAxis: { ticks: [1,2,3,4,5,6,7,8,9,10] } }

En fonction de vos données, vous souhaiterez peut-être coder en dur ou utiliser des seuils.

0
Simon_Weaver

J'utilise le multiset Guava comme données. Le truc de Cagy79 est le seul que j'ai pu travailler. J'ai également essayé de générer mes propres lignes en utilisant un IntStream, mais j'avais toujours des nombres fractionnaires pour certains graphiques. Comme mentionné ci-dessus, il suffit de définir le format pour créer un graphique où la valeur de survol et le quadrillage sont différents. 

Éléments multiset = TreeMultiset.create ();

Articles ajoutés à l'aide de .add et .addAll

Assurez-vous que les articles sont triés:

occurrences = Multisets.copyHighestCountFirst (items);

Option de chaîne = "hAxis: {titre:" Nombre ", quadrillage: {nombre:" + ((Max> = 12)? 4: max + 1) +}} ")

0
Gregory Alan Bolcer

J'utilise le code suivant:

google.charts.setOnLoadCallback(function(){
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Y');
    data.addColumn('number', 'X');

    var max = 0; //Or something like Int.MinValue
    for (var i = 0;i< arr.length;i++) {
      max = (arr[i]>max)? arr[i]:max; //calculate max value
      data.addRow("<<some calculation>>");
    }

    var options = {
      height: 300,
      vAxis: {
        gridlines: { count: max+1}, //+1 is importent for the origingridline
        viewWindow:{
          min: 0,
          max: max
        },
      }
    };

    var chart = new google.visualization.ColumnChart(document.getElementById("<< div_id >>"));

    chart.draw(data, options);
  }

Calculez simplement votre valeur maximale, puis définissez gridlines.count sur cette valeur.

0
Vitali D.