Google charts légende de manipulation

À l'aide de google graphique de la zone: http://code.google.com/apis/chart/interactive/docs/gallery/areachart.html

Personne ne sait comment je peux freelly manipuler les légendes?

Assez bien, j'en veux un de deux:

  • Être en mesure de freelly définir chaque élément legend quelque part.
  • Définir la légende qui est affiché dans une ligne d'avoir plusieurs lignes si la taille de la légende dépasse la largeur de la zone de légende. (De préférence)

Je voudrais éviter de hacks pour manipuler le format svg à l'intérieur de l'iframe btw.

J'ai besoin de cette... de la chance?
malheureusement, vous ne pouvez pas manipuler les légendes à l'intérieur du SVG 🙁 au plus, dans votre cas, vous pouvez les désactiver

OriginalL'auteur fmsf | 2011-10-18

  1. 15

    Pour plein de contrôle, je vous suggère de de le désactiver en 

    legend : { position:"none"}

    De la création de votre propre totalement personnalisé légende à l'extérieur du graphique avec le html.

    Puis de liaison personnalisé de votre légende du tableau à l'aide de l'événement select, combiné avec cliquez ou stationnaire /événements de focus (ce que vous voulez) sur votre légende personnalisé.

    voir https://code.google.com/apis/ajax/playground/?type=visualization#interaction_using_events pour commencer.

    J'ai juste présenté une demande de fonctionnalité pour cette code.google.com/p/google-visualization-api-issues/issues/...
    pas sûr que le lien est correct, ressemble à vide et le projet github - suis-je raté quelque chose?
    Il semble que depuis que j'ai posté ce lien, Google Visualisation ont décidé de suivre les demandes de modification et des rapports de bug dans GIT Hub. Je voudrais fournir une mise à jour de lien direct ici mais mon billet est enterré quelque part dans une liste de 1,537 des billets au moment de l'écriture.

    OriginalL'auteur MemeDeveloper

  2. 4

    Il n'y a pas une façon de manipuler les légendes que nous le souhaitons.
    Dans la question de la prime:
    Vous pouvez utiliser

    dans les deux graphiques

    legend : 'none'

    et utiliser des couleurs pour garantir que tous les éléments ont la même couleur.

    colors:['red','#004411']

    D'autres que nous ne pouvons pas manipuler beaucoup plus malheureusement 🙁

    voir ma réponse stackoverflow.com/a/13639884/661584 pls, l'alternative est de créer eux-mêmes, avec html . jscript / json etc comme on les aime. Le plein contrôle.
    En fait, il ya des façons de personnaliser les légendes, ici, est l'un des nombreux exemples: codepen.io/panchalkalpesh/stylo/bgebwQ

    OriginalL'auteur fmsf

  3. 0

    Peut-être quelque chose comme ceci (il dépend de la police que vous utilisez, vous avez besoin de chercher de la part de votre police)

    var my_legend = "this is my legend x";

var len_legend = my_legend.length;

var width_graph = 400;

var chars_per_line = width_graph / [REPLACE_BY_PROPORTION]

if (len_legend > chars_per_line) {

    my_legend = wordwrap(my_legend, 20, '<br/>\n');

}

    ET L'ÉCHARPE FONCTION MOT (ou quelque chose comme cela)

    function wordwrap( str, width, brk, cut ) {

    brk = brk || '\n';

    width = width || 75;

    cut = cut || false;

    if (!str) { return str; }

    var regex = '.{1,' +width+ '}(\\s|$)' + (cut ? '|.{' +width+ '}|.+$' : '|\\S+?(\\s|$)');


return str.match( RegExp(regex, 'g') ).join( brk );

}

    ALORS, POUR ton code...

    remplacer les valeurs à 

    var chart = new google.visualization.AreaChart(document....

    etc

    par votre vars.

    pas utiliser width = 400, utiliser la largeur, et ainsi de suite... et de votre chaîne.

    désolé par les guillemets, comme javascript, je ne peux pas faire de la syntaxe plus légère... vérifier ça avec mon idée: james.padolsey.com/javascript/wordwrap-for-javascript
    Ce n'est pas logique? Comment est-ce lié à la carte?
    yo le faire lorsque vous -faire - le graphique. Veuillez coller le code de la génération de votre graphique
    Pouvez-vous me montrer un exemple où c'est branché avec 2 cartes?
    dans le lien que vous utilisez, il y a le code javascript où il y a le var à la mise à jour comme je l'ai dit

    OriginalL'auteur Leandro Tupone

  4. 0

    Je suis à la recherche de toute solution plus intelligente que la mienne donc j'ai vu cette question.

    Ma solution actuelle est de trouver l'élément html qui contient la légende et de manipuler avec eux comme vous le feriez avec votre propre élément html. (Vous aurez à traiter avec SVG elems ici, tout de même)

    document.getElementById('pie-chart').getElementsByTagName('g')[0].setAttribute("style", "transform: translate(-130px)");

    OriginalL'auteur Maleta