Comment puis-je lire et modifier les axes sur un graphique Google déjà dessiné?

J'ai une page avec plusieurs graphiques de google, principalement des graphiques combinés et des graphiques de lignes. Par exemple:

chart = new google.visualization.LineChart(chartDiv);

Une fois que la page a déjà dessiné, j'aimerais pouvoir lire les valeurs maximales hors des axes, puis redessiner les graphiques afin qu'ils aient tous les mêmes valeurs maximales sur leurs axes (c'est-à-dire qu'ils sont plus faciles à comparer à un coup d'oeil). Je ne connais pas ces valeurs maximales par avance.

Je pourrais modifier les options et redessiner les graphiques avec

 chart.draw(data, options)

Mais je ne sais pas comment tirer les données des axes. L'objet graphique a une méthode appelée .getChartLayoutInterface() Cela semble prometteur mais je ne suis pas sûr de l'utiliser. Par exemple, cela fonctionne:

 var b = c.getChartLayoutInterface().getChartAreaBoundingBox();

mais,

 var b = c.getChartLayoutInterface().getVAxisValue();

Renvoie null .

Vous devriez demander à @Sjoerd comment getChartLayoutInterface () fonctionne, car il ne semble pas qu'il y ait de documentation en ligne.

En attendant, ce que vous pouvez faire, c'est d'obtenir les valeurs minimales et maximales de chaque diagramme que vous créez, puis prendre le maximum et le min du maximum / min pour tous les tableaux combinés.

En utilisant ces valeurs max / min, vous pouvez régler manuellement le min / max pour chaque graphique (avec un joli arrondissement). Pour faire l'arrondissement très bien, je suggère ce qui suit:

 // Take the Max/Min of all data values in all graphs var totalMax = 345; var totalMin = -123; // Figure out the largest number (positive or negative) var biggestNumber = Math.max(Math.abs(totalMax),Math.abs(totalMin)); // Round to an exponent of 10 appropriate for the biggest number var roundingExp = Math.floor(Math.log(biggestNumber) / Math.LN10); var roundingDec = Math.pow(10,roundingExp); // Round your max and min to the nearest exponent of 10 var newMax = Math.ceil(totalMax/roundingDec)*roundingDec; var newMin = Math.floor(totalMin/roundingDec)*roundingDec; // Determine the range of your values var range = newMax - newMin; // Define the number of gridlines (default 5) var gridlines = 5; // Determine an appropriate gap between gridlines var interval = range / (gridlines - 1); // Round that interval up to the exponent of 10 var newInterval = Math.ceil(interval/roundingDec)*roundingDec; // Re-round your max and min to the new interval var finalMax = Math.ceil(totalMax/newInterval)*newInterval; var finalMin = Math.floor(totalMin/newInterval)*newInterval;

Ceci est similaire à la façon dont Google détermine les valeurs max / min (parfois si vous avez, par exemple, -6.2 et 3.1 comme valeurs, il utilisera 3.1 pour les lignes de quadrillage, même si c'est un nombre impair à utiliser). Mais en créant votre propre arrondissement, vous pouvez vous occuper de l'opportunité de comprendre comment google rounds (ce qui est une proposition délicate).

Faites-moi savoir si vous ne comprenez pas correctement.

Selon la documentation, la fonction getVAxisValue a la signature suivante:

getVAxisValue(position, optional_axis_index)

Renvoie la valeur verticale logique à la position, qui est un décalage du bord supérieur du conteneur de graphique. Peut être négatif.

Exemple: chart.getChartLayoutInterface().getVAxisValue(300) .

Appelez-le après avoir dessiné le graphique.

Type de retour: number

Puisque votre objectif est de lire les valeurs maximales hors des axes, puis redessiner les graphiques afin qu'ils aient tous les mêmes valeurs maximales sur leurs axes , je suggérerais la solution suivante

Calculez les valeurs min / max de google.visualization.DataTable :

 function calcMinMax(data, colIndex) { var totalMin = data.getValue(0,colIndex); var totalMax = data.getValue(0,colIndex); for(var i = 0; i < data.getNumberOfRows();i++){ if ( data.getValue(i, colIndex) < totalMin ) { totalMin = data.getValue(i, colIndex); } if ( data.getValue(i, colIndex) > totalMax ) { totalMax = data.getValue(i, colIndex); } } return {'min': totalMin, 'max': totalMax }; }

Et définissez l'option viewWindow :

 var vAxisMinMax = calcMinMax(data,1); options.vAxis = {'viewWindow': {'min': vAxisMinMax.min, 'max': vAxisMinMax.max}};

Exemple

 google.load('visualization', '1', { packages: ['corechart', 'line'] }); google.setOnLoadCallback(drawBasic); function drawBasic() { var data = new google.visualization.DataTable(); data.addColumn('number', 'X'); data.addColumn('number', 'Dogs'); data.addRows([ [0, 5], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9], [6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35], [12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48], [18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57], [24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53], [30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65], [36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65], [42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70], [48, 72], [49, 68], [50, 66], [51, 65], [52, 67], [53, 70], [54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68], [60, 64], [61, 60], [62, 65], [63, 67], [64, 68], [65, 69], [66, 70], [67, 72], [68, 75], [69, 80] ]); var options = { hAxis: { title: 'Time' }, vAxis: { title: 'Popularity' } }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); var vAxisMinMax = calcMinMax(data,1); options.vAxis = {'viewWindow': {'min': vAxisMinMax.min, 'max': vAxisMinMax.max}}; chart.draw(data, options); } function calcMinMax(data, colIndex) { var totalMin = data.getValue(0,colIndex); var totalMax = data.getValue(0,colIndex); for(var i = 0; i < data.getNumberOfRows();i++){ if ( data.getValue(i, colIndex) < totalMin ) { totalMin = data.getValue(i, colIndex); } if ( data.getValue(i, colIndex) > totalMax ) { totalMax = data.getValue(i, colIndex); } } return {'min': totalMin, 'max': totalMax }; }

 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <div id="chart_div"></div>