Google Charts - Faire de saut de ligne des étiquettes de l'axe en deux lignes? (Plusieurs Axes X)

Dernière Mise À Jour

De Travail Exemple: http://jsbin.com/eyokec/1/ (edit version)

Bien, comme d'habitude, certains creuser autour rapporté quelques solutions possibles. J'avais seulement réussi à obtenir un travail, mais au moins vous savez qu'il est possible à ce stade. Cette réponse de Insérer des Liens dans Google api Graphiques de données? fourni la solution de travail ci-dessus.

  //Note: You will probably need to tweak these deltas
  //for your labels to position nicely.
  var xDelta = 35;
  var yDelta = 13;
  var years = ['2012/12/27|12:01','2012/12/26|12:22','2012/12/25|11:33','2012/12/24|11:33'];
  $('text').each(function(i, el) {
      if (years.indexOf(el.textContent) != -1) {
          var g = el.parentNode;
          var x = el.getAttribute('x');
          var y = el.getAttribute('y');
          var width = el.getAttribute('width') || 70;
          var height = el.getAttribute('height') || 35;

          //A "ForeignObject" tag is how you can inject HTML into an SVG document.
         var fo = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject");
          fo.setAttribute('x', x - xDelta);
          fo.setAttribute('y', y - yDelta);
          fo.setAttribute('height', height);
          fo.setAttribute('width', width);

          var body = document.createElementNS("http://www.w3.org/1999/xhtml", "BODY");
          var p = document.createElement("P");

          p.setAttribute("style", "font-size:.8em; font-family:Arial;text-align:center;color:#555;");
          p.innerHTML = el.textContent.replace('|','<br />');

          body.appendChild(p);
          fo.appendChild(body);

          //Remove the original SVG text and replace it with the HTML.
          g.removeChild(el);
          g.appendChild(fo);
      }
  });

Du code du travail, mais, naturellement, est loin d'être idéale. C'est juste une preuve de concept que vous pouvez espérer l'utiliser. J'ai vu d'autres questions similaires à propos de la mise à jour des fichiers SVG, mais je ne pouvais pas les faire travailler. Le code ci-dessus peut être en mesure de mettre à jour th SVG <text> nœuds en s'appuyant sur <tspan> pour le multi-support. Je pourrais essayer d'obtenir que cela fonctionne à un certain point.

Tests

• Chrome 23.0.1271.97 m: PASSER
• Firefox 17.0.1: PASS (plus de hauteur nécessaire)
• IE9: FAIL (je ne sais pas pourquoi)

Références

• La manipulation des Documents SVG à l'Aide de ECMAScript (Javascript) et les DOM
• http://raphaeljs.com/
• jQuery SVG: http://keith-wood.name/svg.html

---

Mise à jour 0

Aussi, il semble que Google Image Graphiques API est maintenant obsolète.

Important: L'Image des Diagrammes partie de Google Chart Tools a été officiellement obsolète du 20 avril 2012. Il continuera à fonctionner comme par notre la dépréciation de la politique.

Ainsi, bien que vous pouvez créer le graphique comme un exemple de ce que vous souhaitez, il est possible que la fonctionnalité n'a pas été portée sur Google Chart Tools.

Cela dit, je n'ai trouver ce Assistant Graphique qui permettront de créer le code JavaScript nécessaire à l'intégration de votre graphique avec la Visualisation de l'API.

---

Original

N'apparaît pas possible. Vous pouvez forcer l'aide hAxis.minTextSpacing. Cela fonctionne, mais ce n'est certainement pas le but de cette option de configuration. Vous pouvez également tirer les étiquettes et de les gérer via HTML, mais je sais que c'est pas l'idéal non plus.

OriginalL'auteur JSuar

Mettre un saut de ligne \n en cas de besoin
par exemple,

var data = [
    ["Days", "Pressure"],
    ["Mon\n16", 20],
    ["Tue\n17", 16],
    ["Wen\n18", 10],
    ["Thr\n19", 16],
    ["Fri\n20", 17]
];

Résultat exemple

OriginalL'auteur Viwell

Dans notre cas, il a également été PHP simple vs double-guillemets:

MAUVAIS date( 'Y\nM' )

MIEUX date( "Y\nM" )

OriginalL'auteur lkraav