web-dev-qa-db-fra.com

Les graphiques Google peuvent-ils prendre en charge le double axe y (axe v)?

L'API du graphique Flot prend en charge les échelles à double axe V, comme indiqué par cet exemple .

J'utilise Google Charts - est-ce possible aussi avec Google? J'ai regardé les exemples et les documents, mais je ne trouve aucun exemple/référence pour indiquer qu'il prend en charge les graphiques à deux axes.

chartsvisualizationgoogle-visualization
41
Kevin

Il m'a fallu un certain temps pour comprendre cela, mais Google Charts prend en charge le double axe Y (axe V). Je veux utiliser l'API Javascript et non l'interface HTML.

Cet exemple peut être testé ici: http://code.google.com/apis/ajax/playground/?type=visualization#line_chart

Remplacez tout ce code par ce code montrant comment avoir deux échelles d'axe Y différentes:

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'x');
  data.addColumn('number', 'Cats');
  data.addColumn('number', 'Blanket 1');
  data.addColumn('number', 'Blanket 2');
  data.addRow(["A", 1, 1, 0.5]);
  data.addRow(["B", 2, 0.5, 1]);
  data.addRow(["C", 4, 1, 0.5]);
  data.addRow(["D", 8, 0.5, 1]);
  data.addRow(["E", 7, 1, 0.5]);
  data.addRow(["F", 7, 0.5, 1]);
  data.addRow(["G", 8, 1, 0.5]);
  data.addRow(["H", 4, 0.5, 1]);
  data.addRow(["I", 2, 1, 0.5]);
  data.addRow(["J", 3.5, 0.5, 1]);
  data.addRow(["K", 3, 1, 0.5]);
  data.addRow(["L", 3.5, 0.5, 1]);
  data.addRow(["M", 1, 1, 0.5]);
  data.addRow(["N", 1, 0.5, 1]);


  // Create and draw the visualization.
  new google.visualization.LineChart(document.getElementById('visualization')).
      draw(data, {curveType: "function", width: 500, height: 400,
    vAxes: {0: {logScale: false},
            1: {logScale: false, maxValue: 2}},
    series:{
       0:{targetAxisIndex:0},
       1:{targetAxisIndex:1},
       2:{targetAxisIndex:1}}}
          );
}

En ajoutant maxValue: 2 au code, et en définissant les séries 1 et 2 sur cet axe, elles fonctionnent correctement sur un deuxième axe.

96
QLeap

solution non JavaScript

En supposant que vous recherchez une série qui partage le même axe X (horizontal) mais qui a des valeurs (et des échelles) différentes pour l'axe Y (vertical), vous pouvez le faire sans recourir à JavaScript comme suit:

  1. Sélectionnez Insérer | Graphique à partir du menu.
  2. Double-cliquez sur le graphique et dans l'éditeur de graphique, sélectionnez Type de graphique | Graphique en ligne.
  3. Cliquez sur l'icône de la grille dans la zone "Plage de données" pour obtenir la boîte de dialogue de plage de données.
  4. Cliquez sur la feuille de calcul contenant les données qui vous intéressent pour les lignes de l'axe Y et mettez en surbrillance du haut à gauche vers le bas à droite pour couvrir toutes les lignes de l'axe Y. Vous pourrez ranger les colonnes plus tard.
  5. Cliquez sur OK et vous verrez qu'une collection de séries a été extraite. Utilisez le "menu à points" de chaque série pour supprimer ceux qui ne vous intéressent pas.
  6. Cliquez sur l'icône de la grille dans la case "Axe X" pour ouvrir à nouveau la boîte de dialogue de plage de données.
  7. Cliquez sur la feuille de calcul contenant les données qui vous intéressent pour la ligne de l'axe X et mettez en surbrillance de haut en bas.
  8. Cliquez sur OK et vous verrez que l'axe X a été rempli et que les deux lignes de l'axe Y partagent la même étiquette d'axe gauche.
  9. Cliquez sur la ligne pour laquelle vous souhaitez utiliser l'étiquette d'axe droit et utilisez la case "Axe" dans la boîte de dialogue de l'éditeur de graphique pour sélectionner "Axe droit".

Vous pouvez maintenant modifier les différentes autres propriétés du graphique pour lui donner l'apparence souhaitée en termes de présentation.

0
Gary Rowe