web-dev-qa-db-fra.com

Définition d'une valeur d'axe minimale fixe dans l'API Google Charts

J'essaie de créer un graphique Google pour afficher des pourcentages de disponibilité et d'indisponibilité, empilés. Cela fonctionne très bien, sauf pour une petite chose - je voudrais que la ligne de base du graphique soit à 99,8 et le maximum à 100 - puisque les temps d'arrêt sont généralement inférieurs à 0,2, cela rendra le graphique lisible.

Cela m'a paru assez simple. J'ai pensé que cela fonctionnerait:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Uptime');
data.addColumn('number', 'Downtime');
data.addRows([
  ['Dec 1, 1830',   99.875, 0.125],
  ['Dec 8, 1830',   99.675, 0.325],
  ['Dec 15, 1830',  99.975, 0.025],
  ['Dec 22, 1830',  100.0,  0.0]
]);

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, isStacked: true, vAxis: { title: "Percentage Uptime", minValue: 99.8, maxValue: 100}});

Malheureusement, le graphique ne tient absolument pas compte de la minValue sur le vAxis. Cela semble être un comportement attendu, selon l'API, mais cela laisse la question - comment pourrais-je accomplir cela? Je suis même allé jusqu'à transformer les données - c'est-à-dire, soustraire 99,8 de toutes les valeurs de disponibilité, et simplement faire passer le graphique de 0 à 0,2, et cela crache un graphique qui semble correct, mais je ne peux pas appliquer étiquettes à l'axe vertical qui diraient 99,8, 99,85, 99,9, peu importe - l'axe dit, tout à fait consciencieusement, 0 en bas et 0,2 en haut, et il semble qu'il n'y ait aucun moyen de le fixer dans ces directions non plus. L'une ou l'autre solution serait acceptable, je suis sûr qu'il y a QUELQUE manière de faire fonctionner cela?

javascriptgoogle-visualization
55
jasonpgignac

vous devez définir viewWindow comme ceci:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Uptime');
data.addColumn('number', 'Downtime');
data.addRows([
 ['Dec 1, 1830',   99.875, 0.125],
  ['Dec 8, 1830',   99.675, 0.325],
  ['Dec 15, 1830',  99.975, 0.025],
  ['Dec 22, 1830',  100.0,  0.0]

]);

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data,
           {width: 400, 
            height: 240, 
            isStacked: true,
            vAxis: { 
              title: "Percentage Uptime", 
              viewWindowMode:'explicit',
              viewWindow:{
                max:100,
                min:99.8
              }
            }
            }                 
          );

// édité pour une version plus récente de l'api

80
Nikes

J'ai eu un problème similaire et j'ai dû spécifier la propriété comme "min" et non "minValue"

vAxis: { 
    viewWindowMode:'explicit',
    viewWindow: {
        max:100,
        min:99.8
    }
}
21
Ahmad Abdelghany